HTML5 DragEvent学习+制做一个能够拖动的DIV

HTML5 拖放

1、为了使元素可拖动，把 draggable 属性设置为 true

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

2、添加事件监听

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键，取消这个操做，也不会触发该事件。该事件的监听函数负责取出拖拉数据，并进行相关处理。

点击这个连接查看HTML5各个拖放事件

总结

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

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

1. dragstart， drag， dragend 在被拖动的节点触发，触发的event.target为被拖拽的节点
2. dragenter dragover dragleave drop 在目标节点触发，触发的event.target为释放的目标节点
3. 在 dragover触发时须要执行event.preventDefault()，容许被拖动的节点进入。

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

一、在firefox上 drag、dragend 事件不可以获取鼠标位置
二、须要在dragstart 触发时保存数据，否则不能拖动。
三、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，点击查看