拖动案例demo实现
<template><div><div class="group one-level"><divclass="group-item"v-for="(group, index) in groups":key="group.id"draggable="true"@dragstart="dragStart(group, $event)"@dragover.prevent@drop="dragDrop(group, index, $event)">{{ group.name }}<divclass="subgroup-item"v-for="subgroup in group.subgroups":key="subgroup.id"draggable="true"@dragstart="dragStart(subgroup, $event)"@dragover.prevent@drop="dragDropSubgroup(group, subgroup, $event)">{{ subgroup.name }}</div></div></div></div>
</template><script>
export default {data() {return {groups: [{id: 1,name: 'Group 1',subgroups: [{ id: 11, name: 'Subgroup 1.1' },{ id: 12, name: 'Subgroup 1.2' },],},{id: 2,name: 'Group 2',subgroups: [{ id: 21, name: 'Subgroup 2.1' },{ id: 22, name: 'Subgroup 2.2' },],},],draggedItem: null,};},methods: {dragStart(item, event) {this.draggedItem = item;event.dataTransfer.effectAllowed = 'move';event.dataTransfer.setData('text/plain', item.id);},dragDrop(group, index, event) {const id = event.dataTransfer.getData('text/plain');const subgroup = this.groups.find((g) => g.id === parseInt(id, 10));if (subgroup) {this.groups[index].subgroups.push(subgroup);subgroup.subgroups = subgroup.subgroups.filter((s) => s.id !== group.id);}},dragDropSubgroup(group, subgroup, event) {subgroup.subgroups.push(group);},},
};
</script><style>
.group {display: flex;flex-direction: column;align-items: flex-start;
}.group-item {margin: 5px;padding: 5px;border: 1px solid #ccc;
}.subgroup-item {margin-left: 20px;
}
</style>
)
