vue3 拖曳填充

<template> <div class="container"> <div class="box" @dragstart="dragStart($event, item, 'left')" @drop="drop($event, 'left')" @dragover.prevent> <div v-for="(item, index) in leftItems" :key="index" draggable="true"> {{ item }} </div> </div> <div class="box" @dragstart="dragStart($event, item, 'right')" @drop="drop($event, 'right')" @dragover.prevent> <div v-for="(item, index) in rightItems" :key="index" draggable="true"> {{ item }} </div> </div> </div> </template> <script> export default { data() { return { leftItems: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'], rightItems: [], draggedItem: null, sourceBox: '', }; }, methods: { dragStart(event, item, box) { this.draggedItem = item; this.sourceBox = box; event.dataTransfer.setData('text/plain', item); }, drop(event, targetBox) { if (this.sourceBox !== targetBox && this.draggedItem) { let movedItem; if (this.sourceBox === 'left') { movedItem = this.leftItems.splice(this.leftItems.indexOf(this.draggedItem), 1)[0]; this.rightItems.push(movedItem); } else { movedItem = this.rightItems.splice(this.rightItems.indexOf(this.draggedItem), 1)[0]; this.leftItems.push(movedItem); } event.target.appendChild(document.querySelector(`[draggable=true]:contains('${movedItem}')`)); } }, }, }; </script> <style scoped> .container { display: flex; justify-content: space-around; } .box { width: 80%; min-height: 100px; border: 1px solid #ccc; display: flex; flex-wrap: wrap; padding: 10px; } </style>