h5拖动总结

1.拖动神器sortablejs   https://www.npmjs.com/package/sortablejs   http://www.sortablejs.com/options.html

sortablejs 有vue，angular，react 版的实现

vue版 https://github.com/SortableJS/Vue.Draggable  通过options 可以完全使用 sortable的配置

2.vue-grid-layout https://github.com/jbaysolutions/vue-grid-layout  拖动事件使用 interactjs 来实现的。

 可以实现在容器内拖动 自由碰撞，碰撞原理是：使用坐标对元素进行排序，元素替换只会在Y轴方向移动

3.原生h5拖动

设置被拖动元素的dragable=true 即可以拖动 

被拖动元素的事件 

drag 拖动中

dragstart 开始拖动

 

拖动到的元素事件

dragover 默认行为是不允许将将元素拖动到其他元素中，需要阻止默认行为才能触发 drop事件

drop  拖动到目标

 

DragEvent.dataTransfer.setDargImage(Element,x,y)， 可以通过这个方法改动拖动的虚影，如果要隐藏虚影可以使用一个空白的element。如果被拖动的元素隐藏或者在dom中被移除了，拖动结束。