In nativem Js implementiert
Um Drag & Drop zu implementieren und Daten zu übertragen, müssen Sie die Drag & Drop-API von HTML5 verwenden. Setzen Sie zunächst die Draggable-Eigenschaft für das gezogene Element auf true:
<divdraggable="true">拖动我</div>Legen Sie dann die Ereignishandler ondragover und ondrop für das Zielelement fest, die ausgelöst werden, wenn das Element in den Zielbereich gezogen wird:
<divondragover="allowDrop(event)"ondrop="drop(event)">放置区域</div>Als nächstes legen Sie einen ondragstart-Ereignishandler für das Ziehelement fest, damit die Daten festgelegt werden, wenn der Ziehvorgang beginnt:
<divdraggable="true"ondragstart="drag(event)">拖动我</div>Im Drag-Event-Handler können Sie die Methode setData aufrufen, um den zu übergebenden Datentyp und Wert festzulegen:
functiondrag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}Im Drop-Event-Handler können Sie die Methode getData aufrufen, um den übergebenen Datentyp und -wert abzurufen:
functiondrop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}Um ein Element nach dem Ziehen und Ablegen verschwinden zu lassen, verwenden Sie die Methode „removeChild“ im Drop-Event-Handler, um das Element aus dem DOM zu entfernen:
functiondrop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var draggedElement = document.getElementById(data);
ev.target.appendChild(draggedElement);
draggedElement.parentNode.removeChild(draggedElement);
}Auf diese Weise wird das Ziehelement beim Ablegen im Zielbereich in den Bereich verschoben und von der ursprünglichen Position gelöscht, und die übergebenen Daten können über die getData-Methode abgerufen werden.
implementiert in vue
Die Methode zum Implementieren von Drag-and-Drop und zum Übertragen von Daten in Vue ähnelt der von nativem JavaScript, muss jedoch die Syntax- und Ereignisbehandlungsmethoden von Vue kombinieren. Hier ist ein einfaches Beispiel:
<template><div><divclass="drag"v-for="item in items":key="item.id":draggable="true" @dragstart="dragStart(item, $event)">
{
{ item.text }}
</div><divclass="drop" @dragover.prevent @drop="drop($event)">
放置区域
</div></div></template><script>exportdefault {
data() {
return {
items: [
{ id: 1, text: '拖动我' },
{ id: 2, text: '再拖动我' },
{ id: 3, text: '再再拖动我' },
],
};
},
methods: {
dragStart(item, event) {
event.dataTransfer.setData('text/plain', item.id);
},
drop(event) {
event.preventDefault();
const itemId = event.dataTransfer.getData('text/plain');
const draggedItem = this.items.find((item) => item.id === Number(itemId));
const index = this.items.indexOf(draggedItem);
this.items.splice(index, 1);
},
},
};
</script>Im obigen Beispiel verwenden wir die v-for-Direktive, um jedes Element im items-Array als ziehbares div-Element darzustellen und legen den Datentyp und Wert fest, der im Dragstart-Ereignishandler übergeben werden soll. Wir legen auch die Dragover- und Drop-Ereignishandler für das div-Element des Drop-Bereichs fest, sodass sie ausgelöst werden, wenn das Element in den Zielbereich gezogen wird, und erhalten den übergebenen Datentyp und Wert im Drop-Event-Handler und aktualisieren ihn Die Elemente basieren auf diesem Datenarray, um die Funktion des Ziehens und Ablegens sowie des Übertragens von Daten zu realisieren.
Es ist zu beachten, dass wir die Prevent-Methode im Dragover-Ereignishandler aufrufen, um das Standard-Drag-and-Drop-Verhalten des Browsers zu verhindern. Anstatt Elemente direkt beim Ziehen und Ablegen zu löschen, aktualisieren wir außerdem das Elementarray, was besser mit dem reaktionsfähigen Datenbindungsmechanismus von Vue zusammenarbeitet und so effizientere Aktualisierungen und Renderings ermöglicht.