使用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 源代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。