拖拽 VUE 代码生成

找到一个不太想用的解决方案，这里稍作分享--使用Vue.directive('draggable', draggable)插入自定义指令

不想用的原因是：太繁琐 + 可能工作量太大 + 可能会遇到未知异常

使用：

<div> <div class="divA" v-draggable="{edit: false, drag: true, drop: false, clone: true}"> A--拽元素 </div> <div class="divB" v-draggable="{edit: true, drag: true, drop: true, clone: false}"> B--拖入元素 </div> </div> 

设置指令：

import handle from "./handle" export default { inserted(el, binding, vnode) { const { value } = binding // 添加 contenteditable 属性并设置为 true if (value && value.edit) { el.setAttribute('contenteditable', 'true') } // 添加 draggable 属性并设置为 true if (value && value.clone && value.drag) { el.setAttribute('draggable', 'true') // 添加克隆事件监听器 el.addEventListener('dragstart', handle.onDragClone); el.addEventListener('drag', handle.onDrag); el.addEventListener('dragend', handle.onDragend); } else if (value && value.drag) { el.setAttribute('draggable', 'true') // 添加事件监听器 el.addEventListener('dragstart', handle.onDragStart); el.addEventListener('drag', handle.onDrag); el.addEventListener('dragend', handle.onDragend); } // 添加可移入事件监听器 if (value && value.drop) { el.addEventListener('dragover', handle.onDragover); el.addEventListener('dragenter', handle.onDragenter); el.addEventListener('dragleave', handle.onDragleave); el.addEventListener('drop', handle.onDrop); } }, unbind(el, binding, vnode) { console.log('unbind: 只调用一次，指令与元素解绑时调用'); const { value } = binding // 移除拖拽事件监听器 } } 

然后按自己的需要去写监听事件，简单测试了个示例：

使用html5的draggable='true'+vue自定义指令，勉强也算实现了类似的拖拽效果，但是要处理的细节好多

vue.draggable	v-drag
vue.draggable插件	自定义封装
方法接口现成且较完善	使用指令插入到元素没有包夹div层，不干扰样式渲染
原理是在外层囊括了一层可供操作的div盒子，对部分组件样式有影响，影响到了一些布局调整	功能方法不完善，目前只实现封装了拖拽、放下、拷贝、数据删除等逻辑，但是每次拖拽会排布到目标空间的最末尾，如果要实现拖拽排序还需要计算移动略过元素来进行计算(较复杂)

还是求问下有没有功能方法齐全的符合预期的插件，自己封装要处理的细节太多了