元素拖动摆放事件

项目需要，要制作一个可以拖动 H标签 的标题放入 table 表格上面。

在菜鸟教程上面找到的实例

原文连接，效果测试
效果图

未拖动

拖动中

拖动完毕

被拖动的元素

draggable 属性

• 接收参数 Boolean
• 描述：当前元素是否可以被拖动

ondragstart 事件

• 接收参数： Function
• 描述：用户开始拖动元素时触发

ondrag 事件

• 接收参数： Function
• 描述：元素正在拖动时触发

ondragend 事件

• 接收参数： Function
• 描述： 用户完成元素拖动后触发

释放目标，接收拖动事件的元素

ondragenter 事件

• 接收参数： Function
• 描述：当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover 事件

• 接收参数： Function
• 描述： 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave 事件

• 接收参数： Function
• 描述： 当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop 事件

• 接收参数： Function
• 描述： 在一个拖动过程中，释放鼠标键时触发此事件

拖动元素时操作数据

DataTransfer.setData() api

• 接收两个参数：1 变量名，2 所存的数据。
• 说明：在拖动事件开始事件 dragStart 中使用，存储一些必要的数据，在释放目标时可以读取出来
• MDN文档

function dragStart(event) {
    // event 源生对象
    event.dataTransfer.setData("Text", event.target.id);
}

DataTransfer.getData（） api

• 接收参数：1 变量名。
• 说明：可以读取之前在 dragStart 事件中存储的数据。
• MDN文档

function drop(event) {
    // event 源生对象
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
}