使用Vue.Draggable的自定义拖拽表单是如何实现的

创始人

2024-05-31 02:20:44

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

// NPM 或 yarn 安装方式yarn add vuedraggablenpm 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',//组名为 itxstpull: 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 表单设计及代码生成器

代码参考：


{{ item.label }}

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);});};}
}

xxxxx内容展示xxxxx

上一篇：英国伯爵名字？

下一篇：千元创业致富项目千元创业致富项目千元创业赚钱好项目

使用Vue.Draggable的自定义拖拽表单是如何实现的

vue.draggable 全部事件列表

事件列表

相关内容

热门资讯