vueDraggable
两个或者多列之间相互拖动
关键点group属性
1.group名称就可以相互拖拽了
2.直接设置group属性
//两列组件设置相同的group名就可以相互拖拽了
<draggable v-model="arr" group="site">
<transition-group>
<div class="item" v-for="item in arr" :key="item.id">{{item.name}}</div>
</transition-group>
</draggable>
//group属性：
//设置方式一，直接设置组名
//设置方式，object，也可以通过自定义函数function实现复杂的逻辑
group:{
name:'site',//组名为site
pull:true|false|function,//是否允许 拖入 当前组
put:true|false|function, //是否允许 拖出 当前组
}
代码详情点击
，可以查看到详细的代码。
空数组问题
问题: 上面的示例中，当
A数组为空时，会出现无法拖动的情况。解决: 需要设置 transition-group 的高度才能拖入这个空数组style 等于 min-height:120px;display: block;
原因: 因为transition-group会被解析成为span标签，当没有内容式span标签的高度为空，vueDraggable则无法感知它的范围。
A组只能拖出不能拖入
<draggable v-model="arr1" :group="grpupA" animation="300" dragClass="dragClass"
ghostClass="ghostClass"
chosenClass="chosenClass"
@start="onStart"
@end="onEnd">
<transition-group :style="style">
<div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
</transition-group>
</draggable>
//设置:group="grpupA"只能拖出
grpupA:{
name:'site',
pull:true,
put:false
}
style: `min-height:120px;display: block;`
代码详情点击
