HTML5拖放

拖放，即抓取对象以后拖到另一个位置。在HTML5中，任何元素都能够拖放。

设置节点可拖放：

draggable属性：告诉浏览器哪些元素需要实现拖拽功能。有三个值：true、false、auto。

链接、图片默认支持拖拽。
如果一个元素中的文本被选中，那么这个元素和它的文本节点此时都支持被拖拽。

<div draggable="true"></div>

拖放事件：

在被拖动的元素上触发：

1. ondragstart：开始拖拽元素时触发；
2. ondrag：元素被拖拽过程中持续触发；
3. ondragend：元素拖拽结束时触发；

在放置目标上触发：

1. ondragenter：当拖拽对象进入放置目标范围内时触发；
2. ondragover：拖拽对象在放置目标范围内移动时持续触发；
3. ondragleave：当拖拽对象离开放置目标范围内时触发；
4. ondrop：拖拽对象投放在放置目标范围时触发；

在ondragover中必须阻止默认事件，否则后面的ondrop不会被触发。

事件对象event：

在拖拽事件中，事件对象event有一个dataTransfer属性对象，用来保存拖放相关的数据。
设置数据：e.dataTransfer.setData(key,value)；
读取数据：e.dataTransfer.getData(key)；
清空数据：e.dataTransfer.clearData(key)；

e.dataTransfer.getData(key)获取到的是字符串，所以e.dataTransfer.setData(key,value)只能传入数字或者字符串，不能传入对象。

document.ondragstart = function (e) {
   e.dataTransfer.setData('msg',{id:666})
   console.log(e.dataTransfer.getData('msg'))//[object Object]
   console.log({id:666}.toString())//[object Object]
}

.block{
      width:200px;
      height:200px;
      border:1px solid #7af3bc;
      margin:50px;
      padding:20px;
}
        
<div draggable="true">测试拖放</div>
<div style="display: flex;">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

// 监听拖拽开始，记录被拖拽的元素
document.ondragstart = function (e) {
    //判断节点是否有id属性，且是元素节点
    if(!e.target.id && e.target.nodeType === 1){
        // 如果没有id，则设置一个id
        e.target.id = "dragTest";
    }
    
    //保存id信息
    e.dataTransfer.setData("id",e.target.id);
}
//阻止默认事件
document.ondragover = function (e) {
    // 必须在这阻止默认事件 不然后面的ondrop不会被触发
    e.preventDefault();
}
// 监听拖拽释放
document.ondrop = function (e) {
    // 获取释放时的容器
    var targetBox = e.target;
    
    // 根据存储的数据获取被拖拽的元素
    var id = e.dataTransfer.getData("id");
    var dragNode = document.querySelector("#"+id);
    
    // 将元素移动到新的容器中
    targetBox.appendChild(dragNode);
    
    // 清空dragNode
    e.dataTransfer.clearData("id");
    
    // 清空自定义id
    if(id === "dragTest"){
        dragNode.removeAttribute("id")
    }
}