使用Vue.Draggable的自定义拖拽表单是如何实现的
创始人
2024-05-31 02:20:44
0次
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
上一篇：英国伯爵名字？
相关内容
热门资讯
尚德教育的老师教的怎么样？
尚德教育的老师教的怎么样？尚德教育机构有他们独有的教育方式，直播课程可以互动，没听懂的可以看回放反复...
真三赵云龙之心怎么合成
真三赵云龙之心怎么合成真三赵云龙之心怎么合成杀黄龙掉出来的。不过杀黄龙需要一些装备建议在单人模式下练...
小冰 和 小兵 的英文分别怎么...
小冰 和 小兵 的英文分别怎么写？拜托了各位 谢谢little ice little solder ...
进监狱为什么会被其他的犯人打？
进监狱为什么会被其他的犯人打？为什么呢？因为他们和大家一样相信弱肉强食的丛林法则！！！让你看看他们有...
有一本小说女主角叫林小溪男主角...
有一本小说女主角叫林小溪男主角叫李什么琛一不小心爱上总裁作者：聿天使主角：林小溪，李聿旻你问错地方了
百万新娘之爱无悔英杰是敏君亲生...
百万新娘之爱无悔英杰是敏君亲生的吗王英杰是林敏君跟王绍华的儿子,五十九集说了:王英杰是:林敏君、王绍...
女人在恋爱中通常有哪些误区？如...
女人在恋爱中通常有哪些误区？如何避免？女人在恋爱中误区有付出的多少与爱的程度为正比，如果你总觉得如果...
俩人去马尔代夫旅行结婚需要多少...
俩人去马尔代夫旅行结婚需要多少钱？从天津到马尔代夫旅行结婚需要多少钱 什么时候去合适 待上7天左右 ...
人是不是年龄越大越不敢动感情？
人是不是年龄越大越不敢动感情？人并不是年龄越大越不敢动感情，而是因为年龄越大就看透了这世间所有的感情...
说男主重生如何开加盟鞋店如何赚...
说男主重生如何开加盟鞋店如何赚钱的过程的小说。小说重生之超级商业帝国重生之最强富翁重生1978重生1...
拔萝卜儿歌改编歌曲
拔萝卜儿歌改编歌曲儿歌拔萝卜 拔萝卜. 嗨吆嗨吆,拔萝卜,嗨吆嗨吆,拔不动, 老太婆,快快来,快来帮...
为啥所有的付出再他就是一文不值...
为啥所有的付出再他就是一文不值你人与人之间"心已走远"。。。那就不在付出了，既然看透了，那就没必要付...
贝利亚奥特曼
贝利亚奥特曼贝利亚奥特曼有什么故事？他的性格很不好吗？赛罗奥特曼VS黑暗独眼巨人赛罗大怪兽大战！超银...
找一部日剧~~
找一部日剧~~之前看到有人推荐过一部日剧，前两个字是“非常”后面几个字我忘了，请问有谁知道吗？应该是...
“一往如初”是什么意思？
“一往如初”是什么意思？一往如初是什么意思还是像以前一样。一往：一直，始终。如：像。初：以前那样，一...
闲情倩意后面能连个什么句
闲情倩意后面能连个什么句连词后面也可以加有动词的句子. recoveries accrued to...
世界上最( )的( )...
世界上最( )的( )是世界上最(奇妙)的(感觉)是你爱上一个人的时候.世界上最(舒服)的(...
备胎说车：打蜡 封釉 镀膜 镀...
备胎说车：打蜡 封釉 镀膜 镀晶哪个好常规的保养漆面的方法有打蜡封釉，保持时间长久，和提升漆面的硬度...
下背痛的诊断
下背痛的诊断下背痛的诊断
金鼎猜一个数字
金鼎猜一个数字不知道啊啊啊啊金鼎猜一个数字是9