拖放事件
有的事件在被拖放元素上触发,有的事件则在放置目标上触发。
可拖动元素
在某个元素被拖动时,会触发以下事件: 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>