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中被移除了,拖动结束。