vuedraggable拖拽,vue拖拽排序插件vuedraggable
这篇文章主要为大家详细介绍了使用vuedraggable实现从左向右拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了使用vuedraggable实现从左向右拖拽的具体代码，供大家参考，具体内容如下
1 功能描述
使用vuedraggable实现从左边框中拖拽到右边的框中，左边的框不能随意拖拽改变位置，不能向左边框中拖拽组件。右边框中的组件可以拖动位置，但不能拖入到左边框里。
注意事项如下：
(1)可拖动的组中的名字属性必须一致；
(2)左边框中的可拖动的必须含有以下属性，组中的拉："克隆"属性表示可以生成新的组件；组中的放：假属性表示不能向里面拖拽组件；{sort: false}属性表示不能更改组件的位置。
(3)左边框中的可拖动的中的clone=cloneItem 表示组件被拖拽到右边框中后，将生成的是新的组件，如果修改右边组件的数据不会影响左边组件的数据100 .克隆尼特姆实现的是对每个组件的深复制。如果要实现修改两边框中的任何组件，两边组件都会同步变化，则需要删除clone=cloneItem 属性。
(4)右边框中的可拖动的中的开始属性是监听开始拖动组件，添加是监听添加组件，可以根据情况调用其中的数据。
(5)从左边框拖入右边框中判断单个数据是否合法，可以使用移动属性，如果，左侧单个数据不合法返回假的，则无法添加到右侧框中。
2 截图
3 源代码
模板
div class=my_draggle
div class=md_title 使用vuedraggable实现从左到右拖拽/div
div class=md_con
可拖动的
class=mdc_left
v-model=originDataArr
v-bind={sort: false}
v-bind:group={ name:person ，pull:clone ，put:false }
v-bind:clone=cloneItem
原始数据arr中的div v-for=(item，index)v-bind:key= index
span{{item.name}}/spannbsp .不间断空格
span{{item.sex}}/span
/div
/可拖动
可拖动的
class=mdc_right
v-model=newDataArr
v-bind:group={name:person}
v-on:start=dragItem
v-on:add=addItem
新数据arr中的div v-for=(item，index v-bind:key= index
spanning v-bind:src= item。icon //span nbsp .不间断空格
span{{item.name}}/spannbsp .不间断空格
span{{item.sex}}/span
/div
/可拖动
/div
/div
/模板
脚本
从" vuedraggable "导入可拖动的
导出默认值{
名字："我的小家伙",
组件：{
可拖动的
},
道具：{
消息：字符串
},
数据：函数(){
返回{
originDataArr: new Array()，
newDataArr:新数组()
}
},
已安装：函数(){
这个。initdata()；
},
方法：{
initData: function(){
this.originDataArr=[
{姓名：张三，年龄：15岁，性别： 男，icon:require( @/assets/logo。png )}，
{姓名：李四，年龄：15岁，性别： 男，icon:require( @/assets/logo。png )}，
{姓名：王五，年龄：15岁，性别： 男，icon:require( @/assets/logo。png )}，
{姓名：小花，年龄：15岁，性别： 女，icon:require( @/assets/logo。png )}
]
},
克隆项：函数（值){
//深复制一个节点
返回JSON.parse(JSON.stringify(val))
},
dragItem:函数（小部件){
控制台。日志(widget)；
},
addItem:函数（小部件){
控制台。日志(widget)；
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围。我的_拖拉{
位置：相对；
}。md _标题{
字体大小：24px
高度：60px
}。md_condiv{
宽度：600像素
高度：600像素
显示：内嵌-块；
边框：1px纯色# CCCCCC；
边框半径：10px
垂直对齐：顶部；
}。mdc_leftdiv{
高度：40px
行高：40px
边距-顶部：6px
边框：1px纯色# CCCCCC；
光标：移动；
边距：10px 20px
}。mdc_leftdiv:hover{
盒影：1px 2px 4px # CCCCCC；
}。mdc_rightdiv{
高度：40px
行高：40px
边距-顶部：6px
边框：1px纯色# CCCCCC；
光标：移动；
边距：10px 20px
}。mdc_rightdiv:hover{
盒影：1px 2px 4px # CCCCCC；
}。mdc_rightdivspan{
显示：内嵌-块；
垂直对齐：顶部；
}。mdc _ rightdivspanimg {
高度：30px
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。