vue和H5draggable如何实现拖拽并替换效果-创新互联

这篇文章主要为大家展示了vue和H5 draggable如何实现拖拽并替换效果，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

前言

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

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

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

直接上代码