使用vuedraggable实现从左向右拖拽功能使用vuedraggable实现从左向右拖

本文实例为大家分享了使用vuedraggable实现从左向右拖拽的具体代码，供大家参考，具体内容如下
1 功能描述使用vuedraggable实现从左边框中拖拽到右边的框中，左边的框不能随意拖拽改变位置，不能向左边框中拖拽组件。右边框中的组件可以拖动位置，但不能拖入到左边框里。
注意事项如下：
（1）draggable的group中的name属性必须一致；
（2）左边框中的draggable必须含有以下属性，group中的pull:'clone'属性表示可以生成新的组件；group中的put:false属性表示不能向里面拖拽组件；{sort: false}属性表示不能更改组件的位置。
（3）左边框中的draggable中的clone="cloneItem"表示组件被拖拽到右边框中后，将生成的是新的组件，如果修改右边组件的数据不会影响左边组件的数据。cloneItem实现的是对每个组件的深复制。如果要实现修改两边框中的任何组件，两边组件都会同步变化，则需要删除clone="cloneItem"属性。
（4）右边框中的draggable中的start属性是监听开始拖动组件，add是监听添加组件，可以根据情况调用其中的数据。
（5）从左边框拖入右边框中判断单个数据是否合法，可以使用move属性，如果，左侧单个数据不合法返回false，则无法添加到右侧框中。
2 截图
文章图片

3 源代码

.my_draggle{position: relative; } .md_title{font-size: 24px; height: 60px; } .md_con>div{width: 600px; height: 600px; display: inline-block; border: 1px solid #CCCCCC; border-radius: 10px; vertical-align: top; } .mdc_left>div{height: 40px; line-height: 40px; margin-top: 6px; border: 1px solid #CCCCCC; cursor: move; margin: 10px 20px; } .mdc_left>div:hover{box-shadow: 1px 2px 4px #CCCCCC; } .mdc_right>div{height: 40px; line-height: 40px; margin-top: 6px; border: 1px solid #CCCCCC; cursor: move; margin: 10px 20px; } .mdc_right>div:hover{box-shadow: 1px 2px 4px #CCCCCC; } .mdc_right>div>span{display: inline-block; vertical-align: top; } .mdc_right>div>span>img{height: 30px; }