一篇文带你使用js实现拖拽排序

先介绍一下html5的drag属性,拖放（Drag 和 drop）是 HTML5 标准的组成部分。想要启用drag，只要给元素加上draggable="true"就行了（Safari 5.1.2除外）。
  实际效果：

拖动事件(了解事件详情)
  事件分为两类，当前拖动的元素上的事件，以及要放置的位置接收到的事件。
  一.发生在拖动元素上的事件：

事件名 触发时机 触发次数
dragstart 当拖动开始时触发一次 1
drag 拖动开始后反复触发 n
dragend 拖动结束后触发一次

 

二.发生在目标元素上的事件

事件名 触发时机 触发次数
dragenter 当拖动元素进入目标时触发一次 1
dragover 当拖动元素在目标元素范围内时反复触发 n
drop 拖动元素在目标元素内释放时(在设置了dropover事件的前提下) 1

  信息传递

在拖动元素时可以设置传递的信息
event.dataTransfer.setData(“te”, “sss);
两个参数，第一个参数key，第二个参数value。
注意只能传递字符串和url，但是在firefox使用text或Text作为key时会打开新的标签页，所以不要用他们作为key。

    
    
    



    
1
    
2
    
3
    
4