拖放事件

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

可拖动元素

在某个元素被拖动时，会触发以下事件: 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>