拖拽 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盒子，对部分组件样式有影响，影响到了一些布局调整	功能方法不完善，目前只实现封装了拖拽、放下、拷贝、数据删除等逻辑，但是每次拖拽会排布到目标空间的最末尾，如果要实现拖拽排序还需要计算移动略过元素来进行计算(较复杂)

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