vueDraggable-group属性
group属性控制分组之间能否相互拖拽，本文例子A组和B组之间可以相互拖拽；如要看示例项目代码详情，请点击
group字符串用法
//直接设置字符串类型的组名，相同名称的组就可以相互拖拽
<draggable v-model="arr1" group="itxst">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id">
{{ item.name }}
</div>
</transition-group>
</draggable>
<draggable v-model="arr2" group="itxst">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id">
{{ item.name }}
</div>
</transition-group>
</draggable>
Object类型用法
//可以比字符串名称更精确的控制拖入拖出
<draggable v-model="arr1" :group="groupA">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id">
{{ item.name }}
</div>
</transition-group>
</draggable>
<draggable v-model="arr2" :group="groupB">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id">
{{ item.name }}
</div>
</transition-group>
</draggable>
<script>
export default {
data() {
return {
//group属性对象
groupA: {
name: "itxst",
pull: true, //可以拖出
put: true, //可以拖入
},
groupB: {
name: "itxst",
pull: true,
put: true,
},
};
},
};
</script>
自定义函数
//通过自定义函数可以精确的控制是否允许拖入拖出
<draggable v-model="arr1" :group="groupA">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id">
{{ item.name }}
</div>
</transition-group>
</draggable>
<draggable v-model="arr2" :group="groupB">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id">
{{ item.name }}
</div>
</transition-group>
</draggable>
<script>
export default {
data() {
return {
//group属性对象
groupA: {
name: "itxst",
put: true, //可以拖入
pull: () => {
if (this.arr1.length <= 2) {
this.message = "元素小于等于2不允许再拖拽了";
}
return this.arr1.length > 2;
},
},
groupB: {
name: "itxst",
pull: true,
put: true,
},
};
},
};
</script>
代码详情点击
，可以查看到详细的代码。
