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