列表表头拖拽实现排序及代码

列表表头拖拽排序实现原理及应用演示

draggable 属性规定元素是否可拖动。

链接和图像默认是可拖动的。

属性值：

值	描述
true	规定元素是可拖动的。
false	规定元素是不可拖动的。
auto	使用浏览器的默认特性。

<p draggable="true">这是一段可移动的段落。</p>

被拖动元素上的触发事件：

• ondragstart --开始拖动元素时触发

• ondrag --元素正在被拖动时触发

• ondragend --元素结束拖动时触发

目标元素上的触发事件：

• ondragenter --被拖动的元素进入目标元素容器范围内触发

• ondragover --被拖动的元素在目标元素容器范围内移动时触发

• ondragleave --被拖动的元素离开目标元素容器范围内触发

• ondrop --拖动过程中，释放鼠标键时触发

event.preventDefault() 方法：阻止默认事件

ondragover默认情况下，数据/元素不能放置到其他元素中。 如果要实现改功能，我们需要防止元素的默认处理方法。我们可以通过调用 event.preventDefault(