HTML5 DragEvent学习+制作一个可以拖动的DIV

摘要：拖放一为了使元素可拖动，把属性设置为二添加事件监听拖放有如下事件事件拖拉过程中，在被拖拉的节点上持续触发。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。该事件的监听函数负责取出拖拉数据，并进行相关处理。

DragEvent

HTML5拖放有如下事件

drag事件：拖拉过程中，在被拖拉的节点上持续触发。
dragstart事件：拖拉开始时在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中，指定拖拉的数据。
dragend事件：拖拉结束时（释放鼠标键或按下escape键）在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。它与dragStart事件，在同一个节点上触发。不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。
dragenter事件：拖拉进入当前节点时，在当前节点上触发，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。
dragover事件：拖拉到当前节点上方时，在当前节点上持续触发，该事件的target属性是当前节点。该事件与dragenter事件基本类似，默认会重置当前的拖拉事件的效果（DataTransfer对象的dropEffect属性）为none，即不允许放下被拖拉的节点，所以如果允许在当前节点drop数据，通常会使用preventDefault方法，取消重置拖拉效果为none。
dragleave事件：拖拉离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。在视觉上显示拖拉离开当前节点，就在这个事件的监听函数中设置。
drop事件：被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下Escape键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拉数据，并进行相关处理。

当一个节点被拖拉到另一个节点里，触发的事件如下:

dragstart --> drag --> dragenter --> dragover --> drop --> dragend

dragstart， drag， dragend 在被拖动的节点触发，触发的event.target为被拖拽的节点

dragenter dragover dragleave drop 在目标节点触发，触发的event.target为释放的目标节点

在 dragover触发时需要执行event.preventDefault()，允许被拖动的节点进入。

在firefox浏览器上需要注意的东西

1、在firefox上 drag、dragend 事件不能够获取鼠标位置
2、需要在dragstart 触发时保存数据，不然不能拖动。
3、dataTransfer.setData()函数中 key 为‘Text’ 时会打开一个新的标签页

let drag = document.getElementById("drag");
    drag.addEventListener("dragstart", (event) => {
        console.log("dragstart")
        // 兼容 firefox ， setData()函数中 key 为‘Text’ 时会打开一个新的标签页
        // event.dataTransfer.setData("Text","www.baidu.com");
        event.dataTransfer.setData("any","www.baidu.com");
    })

学习了各个事件后做了一个可以拖动的Div的demo，点击查看