元素拖动摆放事件
项目需要，要制作一个可以拖动 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 = https://www.it610.com/article/event.dataTransfer.getData("Text");
}
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 图文小编《杨浦、成毅》为你发布！无价之宝随意摆放的公园
- 你也许不知道的Vuejs|你也许不知道的Vuejs - 花式渲染目标元素
- React.js的表单(六)
- 集合框架(集合嵌套存储和遍历元素的案例代码实现)
- 第六课|第六课 js管理页面元素位置大小
- css|css中元素的显示与隐藏
- 承载梦想一路前行小春‖号氧元素3周年庆典之地中海豪华邮轮行
- [Py023]List元素重复
- CSS笔记