拖拽 VUE 代码生成

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 89 天前的主题，其中的信息可能已经有所发展或是发生改变。

请教下市面上有什么开源项目使用了 Vue.draggable 拖拽生成 Vue 前端代码的吗？😳目前找到的好像都是表单构建器，维护一些组件然后拖入组件，不能直接拖拽设计前端，想找下类似项目研究研究我用 Vue.draggable 封装了一个可拖入容器组件，然后嵌入调用之后，样式全部被干扰了😂开 F12 查看所有的组件会夹一层 div

第 1 条附言 · 88 天前

找到一个不太想用的解决方案，这里稍作分享--使用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
        // 移除拖拽事件监听器
    
    }
}

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

第 2 条附言 · 79 天前

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

vue.draggable	v-drag
`vue.draggable`插件	自定义封装

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

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

9 条回复

mogutouer

89 天前

夹个 div 怕什么，一个正则把字符串处理一下不就去掉了吗

isSamle

89 天前

@mogutouer 用$createElement 即时渲染的，本质不是字符串，是一个 json 数据，通过$createElement 渲染组件，因为按我的设想，使用过程要不断的往其中插入新的页面元素，以及配置数据

isSamle

89 天前

@mogutouer 如果把这个 div 去掉（也就是把 Vue.draggable 去掉），那就不能再往元素里面插元素了

isSamle

89 天前

最好是有什么方法，把一个本来的元素，设置为可拖拽插入元素，原来是什么标签还是什么标签，这样不使用 Vue.draggable 就不会多一层 div

isSamle

89 天前

比如原本是
<el-container>
<draggable>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</draggable>
</el-container>
如果能够改成下面实现拖拽插入的效果，那就少一层 div 就没影响
<el-container vue-draggable>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>

Akuta

89 天前

看看这个？ https://github.com/fyl080801/vjdesign

isSamle

89 天前

@Akuta 谢谢我看看

isSamle

88 天前

如果用`Vue.directive('draggable', draggable)`的话，组件要重新封装，拖拽、克隆方法要重新写、数据处理方法也要重写😂，不知道能不能找到已经封装好的类似 vue.draggable 的指令直接插入使用😂

isSamle

79 天前

目前来看还是要自己封装😂