JavaScript 原生拖放

拖放事件

有的事件在被拖放元素上触发,有的事件则在放置目标上触发。 

可拖动元素

在某个元素被拖动时,会触发以下事件: dragstart、 drag、dragend 。在按住鼠标键不放并开始移动鼠标的那一刻,被拖动元素上会触发 dragstart 事件。拖动开始时。 dragstart 事件触发后,只要目标还被拖动就会持续触发 drag 事件。当拖动停止时,会触发 dragend 事件。 

给一个元素添加 draggable="true" 属性,可以拖动元素。

目标元素

把元素拖动到一个有效的放置目标上时,会依次触发以下事件: dragenter、dragover、dragleave 或 drop。把元素拖动到放置目标上,dragenter 事件就会触发。dragenter 事件触发之后,会立即会持续触发 dragover 事件。 当元素被拖动到放置目标之外,dragover 事件停止触发,dragleave 事件触发。如果被拖动元素被放到了目标上,则会触发 drop 事件而不是 dragleave 事件。

如果把元素拖动到不允许放置的目标上,无论用户动作是什么都不会触发 drop 事件。通过覆盖 dragenter 和 dragover 事件的默认行为,可以把任何元素转换为有效的放置目标。 

使用 dataTransfer 对象传送数据

 // 传递文本
event.dataTransfer.setData("text", "some text"); 
let text = event.dataTransfer.getData("text");

// 传递URL
event.dataTransfer.setData("URL", "http://www.test.com/"); 
let url = event.dataTransfer.getData("URL"); 

"text"和"URL",但它们会分别被映射到"text/plain"和"text/uri-list",dataTransfer 对象实际上可以包含每种 MIME 类型的一个值,也就是说可以同时保存文本和 URL,两者不会相互覆盖。存储在 dataTransfer 对象中的数据只能在放置事件中读取。如果没有在 ondrop 事件处理程序中取得这些数据,dataTransfer 对象就会被销毁,数据也会丢失。 

拖放传送文本

<div class="can-drag" draggable="true">1</div>
<div class="can-con">2</div>

<script type="text/javascript">
document.querySelector('.can-drag').addEventListener('dragstart', e=>{
    e.dataTransfer.setData('text',"这是一串需要传送的字符串");
});

var target = document.querySelector('.can-con');
target.addEventListener('dragover', e=>{
    e.preventDefault(); // 覆盖 dragover 事件,转换为有效的放置目标
});
target.addEventListener('drop', e=>{
    e.preventDefault();
    let text = e.dataTransfer.getData('text');
    console.log('drop get text', text);
});

<style type="text/css">
.can-drag{ display: block; width: 100px; height: 100px; background: grey; color: #fff;margin-bottom: 20px;}
.can-con{ display: block; width: 100px; height: 100px; background: green; color: #fff; }
</style>
</script>


拖放上传文件

<div class="img-drag" draggable="true"> image </div>

<script type="text/javascript">
var imgContainer = document.querySelector('.img-drag');
imgContainer.addEventListener('dragover', e=>{
    e.preventDefault();
});
imgContainer.addEventListener('drop', e=>{
    e.preventDefault();
    var files = e.dataTransfer.files;
    if (files.length > 0) {
        console.log('上传文件', files);
    }
});
</script>

<style type="text/css">
.img-drag{ display: block; width: 100px; height: 100px; background: grey; color: #fff;margin-bottom: 20px; margin-top: 50px;}
</style>


声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
随机推荐
Debian11 安装笔记4:安装常用软件
WordPress 使用 shortcode() 增加编辑器功能
WordPress 插入文章函数 wp_insert_post()
WordPress 评论表单函数 comment_form()
Vue3 挂载全局方法
使用 svg 作为背景图片
Land APP 小程序
WordPress 中如何在主题和插件中使用