使用Vue.Draggable的自定义拖拽表单是如何实现的_vuedraggable 自定义表单-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47353884/article/details/129406499

Vue.Draggable是一个基于Sortable.js的Vue拖拽插件，支持组件化，便于在Vue应用中集成。文章介绍了如何通过NPM或Yarn安装，以及使用的关键属性如group、sort、animation。此外，还详细列举了拖拽过程中涉及的事件，如start、end、sort等，并展示了如何配置拖拽分组和监听事件。最后，提供了代码示例来展示Vue.Draggable在实际应用中的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.Draggable 是一款基于 Sortable.js 实现的 vue 拖拽插件，实现组件化的思想，可以结合 Vue，使用起来更方便

// NPM 或 yarn 安装方式
 yarn add vuedraggable
 npm i -S vuedraggable

import draggable from 'vuedraggable';
components: {
   draggable
}

属性名称	说明
group	:group= “name”，相同的组之间可以相互拖拽
sort	:sort= “true”,是否开启内部排序,如果设置为 false,它所在组无法排序，在其他组可以拖动排序
animation	拖动时的动画效果,数字类型。如设置 animation=1000 表示 1 秒过渡动画效果

如果是单列拖拽用 group="people"

vue.draggable group 拖拽分组多组之间相互拖拽，可以实现不同数组之间相互拖拽。
比如 group 都为 componentsGroup 的组之间可以相互拖动，本文例子中 A 列和 B 列可以相互拖动，但是无法拖到 C 列。

设置方式，object，也可以通过自定义函数 function 实现复杂的逻辑

  group:{
       name:'componentsGroup',//组名为 itxst
       pull: true|false| 'clone'|array|function,//是否允许拖出当前组
       put:true|false|array|function,//是否允许拖入当前组
}

vue.draggable 全部事件列表

vue.draggable 拖拽时会触发各种事件，比如 start, add, remove, update, end, choose, unchoose, sort, filter, clone 事件，本文将列出 vue.draggable 的全部事件。

事件列表

事件名称	说明
start	开始拖动时触发的事件
add	从一个数组拖拽到另外一个数组时触发的事件
remove	移除事件
update	拖拽变换位置时触发的事件
end	拖拽完成时的事件
choose	鼠标点击选中要拖拽元素时的事件
unchoose	选中后松开鼠标的事件
sort	位置变化时的事件
clone	从一个数组拖拽到另外一个数组时触发的事件和 add 不同，clone 是复制了数组元素

网站参考：
vue.draggable 中文文档
 ✨Element UI 表单设计及代码生成器

代码参考：

<draggable
class="components-draggable"
:list="fieldListTheDisplayOfTheSameElement(element.list)"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
:clone="cloneComponent"
draggable=".components-item"
:sort="true"
@end="onEnd"

>

<div
 v-for="(item, index) in fieldListTheDisplayOfTheSameElement(element.list)"
 :key="index"
 class="components-item"
 @click="addComponent(item)"
>
 <dd :class="[`components-body`, item.valType]">
{{ item.label }}
 </dd>
</div>
</draggable>

computed:{
   fieldListTheDisplayOfTheSameElement() {
      return function(array) {
        return this.fieldList.filter(item => {
          return array.includes(item.valType);
        });
      };
    }
}

computed:{
   fieldListTheDisplayOfTheSameElement() {
      return function(array) {
        return this.fieldList.filter(item => {
          return array.includes(item.valType);
        });
      };
    }
}

<draggable 
class="drawing-board" 
:list="field" 
:animation="340" 
:sort="true" 
:group="{ name: 'componentsGroup' }">
        <div>xxxxx内容展示xxxxx</div>
</draggable>