<template>
<div>
<draggable :list="newArr" item-key="id" class="list-group">
<template #item="{ element }">
<div class="list-group-item">
<div>{{element.name}}</div>
<div>
<TESTDiV :data="element.list" />
</div>
</div>
</template>
</draggable>
</div>
</template>
<script setup>
import TESTDiV from "./TEST_S";
import { reactive, toRefs } from "vue";
import draggable from "vuedraggable";
const state = reactive({
newArr: [
{
name: "属性1",
id: 11,
list: [
{ name: "test1", id: 1 },
{ name: "test2", id: 2 },
{ name: "test3", id: 3 },
{ name: "test4", id: 4 },
{ name: "test5", id: 5 },
{ name: "test6", id: 6 }
]
},
{
name: "属性2",
id: 22,
list: [
{ name: "test7", id: 7 },
{ name: "test8", id: 8 },
{ name: "test9", id: 9 }
]
}
]
});
const { newArr } = toRefs(state);
</script>
<style lang="scss" scoped>
</style>
child
<template>
<draggable class="dragArea list-group"
:list="data"
:clone="clone"
:group="{ name: 'people', pull: pullFunction }"
@start="start"
item-key="id">
<template #item="{ element }">
<div class="list-group-item">
{{ element.name }}
</div>
</template>
</draggable>
</template>
<script setup>
import draggable from "vuedraggable";
defineProps({
data: Array
});
let idGlobal = 8;
const clone = ({ name }) => {
return { name, id: idGlobal++ };
};
const pullFunction = () => {
// return state.controlOnStart ? "clone" : true;
};
const start = ({ originalEvent }) => {
// state.controlOnStart = originalEvent.ctrlKey;
};
</script>
