元素拖动摆放事件

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

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

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

元素拖动摆放事件_第1张图片
未拖动

元素拖动摆放事件_第2张图片
拖动中
元素拖动摆放事件_第3张图片
拖动完毕

被拖动的元素

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");
}

你可能感兴趣的:(元素拖动摆放事件)