vue和H5 draggable实现拖拽并替换效果

前言

公司项目需要做拖拽替换效果，本人用的vue框架。在网上找了很多资料都是用的 Vue.Draggable(git地址)。但这个组件实现的拖拽后插入效果，我倒腾了很久也没有替换效果(如果Vue.Draggable能实现拖拽替换效果的话请大神给我留言)。

JQ有实现拖拽的插件，我下载过一个插件并看过源码，大致原理是给目标元素设置定位属性，通过监听鼠标mousedown，mouseup事件，再计算鼠标位置变化，然后给元素样式设置偏移值来实现拖拽效果的。

H5提供了专门的拖拽API 给元素添加 draggable 属性，设置为 true就能实现拖拽了。本文使用的H5提供的拖拽API 以及vue 无其他任何添加，请放心使用

直接上代码

写在最后

本文是我第一次写博客，写的比较随意，样式处理也是很随心。如有错误请指正。

后面有时间会完善组件的功能。参考Vue.Draggable(git地址)这个组件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。