使用拖拽组件 vuedraggabl，vue3 使用 4.1.0 版本的
前提：父组件中嵌套子组件，子组件中使用拖拽功能
安装
1
| npm i vuedraggable@4.1.0 --save
|
父组件
1
2
3
4
5
6
7
8
9
10
11
12
| import Transfer from "@/components/Transfer/index.vue";
let transferData = ref({
leftTitle: "选择审核人",
rightTitle: "审核流程程序",
list: [
{ label: "张三1", value: "1" },
{ label: "张三2", value: "2" },
{ label: "张三3", value: "3" },
{ label: "张三4", value: "4" },
],
});
|
1
| <Transfer :data="transferData" @auditors="getAuditors" @auditor="getAuditor"></Transfer>
|
子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import draggable from "vuedraggable";
const props = defineProps({
data: {
type: Object,
default() {
return {};
},
},
});
const onMoveCallback = (val) => {
console.log(val, "move");
};
const fold = (val) => {
val.isflod = !val.isflod;
};
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <draggable
:list="props.data.list"
:animation="100"
item-key="id"
class="list-group"
:forceFallback="true"
ghost-class="ghost"
@change="onMoveCallback">
<template #item="{ element }">
<div class="items" @click.stop="fold(element)">
<div class="title">{{ element.label }}</div>
</div>
</template>
</draggable>
|
效果
