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>


声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
Node.js 数据库模块 mysql2
Git push 错误:Updates were rejected because the remote contains work that you do not have locally
JavaScript 引用类型
JavaScript video 教程
JavaScript DOM 查找元素
WordPress 调用自定义头像
WordPress 实现自定义 Ajax 请求
JavaScript ES6 模块