Da Webanwendungen zunehmend genutzt werden, müssen wir zunehmend effizientere Methoden für die Interaktion mit Webseiten entwickeln. Eine davon besteht darin, mithilfe von JavaScript einen ziehbaren Baum (Drag & Drop Tree) zu implementieren. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript einen ziehbaren Baum erstellen. Außerdem werden der Implementierungsprozess und die damit verbundenen technischen Details detailliert beschrieben.
1. Zu erreichende Ziele
Der in diesem Artikel beschriebene ziehbare Baum bezieht sich auf eine Struktur auf einer Webseite, die Knoten einer Baumstruktur enthält, und wir können ihre hierarchischen Beziehungen durch Ziehen und Ablegen neu organisieren. Um einen solchen Baum zu implementieren, müssen die folgenden zwei Schlüsselaspekte vervollständigt werden.
Zuerst müssen wir Knoten für die Baumstruktur auf der Seite erstellen und die Ebenen und Beziehungen zwischen den Knoten bestimmen. Diese Inhalte können mit JSON dargestellt werden. Beispielsweise können wir die Struktur des Baums im folgenden JSON-Format speichern:
{ name: "节点A", children: [{ name: "子节点A1", children: [] }, { name: "子节点A2", children: [{ name: "子节点A2-1", children: [] }] }] }
Als Baumstruktur gerendert, sollte sie so aussehen:
- 节点A |- 子节点A1 |- 子节点A2 |- 子节点A2-1
Knoten per Drag-and-Drop erstellen -drop erfordert etwas JavaScript-Technologie. APIs im Zusammenhang mit Drag & Drop umfassen im Allgemeinen drei Kategorien:
Mit diesen APIs können wir die Ziehfunktion von Knoten einfach implementieren.
2. Technische Details
Nachdem wir unsere Ziele verstanden haben, besprechen wir nun die Implementierungsdetails im Detail. Hier sind die Schritte zur Implementierung:
Wir müssen zuerst Knotenelemente erstellen und diese zum HTML hinzufügen, normalerweise unter Verwendung der ul- und li-Elementhierarchie. Für jeden Knoten ist ein li-Element erforderlich, und weitere li-Elemente müssen im untergeordneten Knoten ul verschachtelt werden. Um die Baumstruktur mit JSON-Daten zu verknüpfen, können Sie die data-*-Attribute verwenden, um die JSON-Daten im entsprechenden li-Element zu speichern.
<ul id="tree"> <li data-name="节点A"> <div class="node">节点A</div> <ul> <li data-name="子节点A1"> <div class="node">子节点A1</div> </li> <li data-name="子节点A2"> <div class="node">子节点A2</div> <ul> <li data-name="子节点A2-1"> <div class="node">子节点A2-1</div> </li> </ul> </li> </ul> </li> </ul>
Wir müssen jedem Knoten Drag-Ereignisse hinzufügen, einschließlich Mousedown, Dragstart, Dragover, Dragleave, Drop und Dragend. Unter diesen müssen die Ereignisse „Mousedown“ und „Dragstart“ verarbeitet werden, bevor das Ziehen beginnt, und die anschließende Verarbeitung erfolgt jeweils durch Dragover, Dragleave, Drop und Dragend. Die Verarbeitungsfunktionen dieser Drag-and-Drop-Ereignisse können durch Ereignis-Listener abgeschlossen werden.
// 获取所有节点并添加事件监听器 const nodes = document.querySelectorAll('.node'); nodes.forEach((node) => { node.addEventListener('mousedown', onMouseDown); node.addEventListener('dragstart', onDragStart); node.addEventListener('dragover', onDragOver); node.addEventListener('dragleave', onDragLeave); node.addEventListener('drop', onDrop); node.addEventListener('dragend', onDragEnd); });
Die Verarbeitungsfunktion von Drag-and-Drop-Ereignissen ist etwas kompliziert und jeder Arbeitsschritt muss sorgfältig entworfen werden. Im Folgenden finden Sie Anweisungen für jeden Schritt:
function onDragStart(event) { if (!isDragged) { draggedItem = event.currentTarget.parentNode; event.dataTransfer.setData('text/plain', event.currentTarget.dataset.name); isDragged = true; } }
function onDragOver(event) { event.preventDefault(); if (!event.currentTarget.dataset.isOver) { event.currentTarget.parentNode.classList.add('over'); event.currentTarget.dataset.isOver = true; } }
function onDragLeave(event) { if (event.currentTarget.dataset.isOver) { event.currentTarget.parentNode.classList.remove('over'); event.currentTarget.dataset.isOver = false; } }
function onDrop(event) { event.preventDefault(); if (event.currentTarget.dataset.isOver) { const droppedItem = event.currentTarget.parentNode; const parent = draggedItem.parentNode; parent.removeChild(draggedItem); event.currentTarget.parentNode.insertBefore(draggedItem, droppedItem.nextSibling); } }
function onDragEnd(event) { event.currentTarget.parentNode.classList.remove('over'); event.currentTarget.dataset.isOver = false; isDragged = false; }
3. Vollständiger Code
Abschließend integrieren wir den obigen Javascript-Code, um einen vollständigen ziehbaren Baum anzuzeigen. Sie können den Code direkt verwenden, in einen Texteditor kopieren, als HTML-Datei speichern und im Browser ausführen.
可拖动的树 <ul id="tree"> <li data-name="节点A"> <div class="node">节点A</div> <ul> <li data-name="子节点A1"> <div class="node">子节点A1</div> </li> <li data-name="子节点A2"> <div class="node">子节点A2</div> <ul> <li data-name="子节点A2-1"> <div class="node">子节点A2-1</div> </li> </ul> </li> </ul> </li> </ul> <script> let draggedItem = null; let isDragged = false; const nodes = document.querySelectorAll('.node'); nodes.forEach((node) => { node.addEventListener('mousedown', onMouseDown); node.addEventListener('dragstart', onDragStart); node.addEventListener('dragover', onDragOver); node.addEventListener('dragleave', onDragLeave); node.addEventListener('drop', onDrop); node.addEventListener('dragend', onDragEnd); }); function onMouseDown(event) { event.preventDefault(); } function onDragStart(event) { if (!isDragged) { draggedItem = event.currentTarget.parentNode; event.dataTransfer.setData('text/plain', event.currentTarget.dataset.name); isDragged = true; } } function onDragOver(event) { event.preventDefault(); if (!event.currentTarget.dataset.isOver) { event.currentTarget.parentNode.classList.add('over'); event.currentTarget.dataset.isOver = true; } } function onDragLeave(event) { if (event.currentTarget.dataset.isOver) { event.currentTarget.parentNode.classList.remove('over'); event.currentTarget.dataset.isOver = false; } } function onDrop(event) { event.preventDefault(); if (event.currentTarget.dataset.isOver) { const droppedItem = event.currentTarget.parentNode; const parent = draggedItem.parentNode; parent.removeChild(draggedItem); event.currentTarget.parentNode.insertBefore(draggedItem, droppedItem.nextSibling); } } function onDragEnd(event) { event.currentTarget.parentNode.classList.remove('over'); event.currentTarget.dataset.isOver = false; isDragged = false; } </script>
Durch die obige Code-Implementierung haben wir erfolgreich eine ziehbare Baumstruktur erstellt. Benutzer können die Baumstruktur auf der Webseite einfach per Drag & Drop anpassen. Gleichzeitig haben wir während des Implementierungsprozesses auch verschiedene technische Details detailliert vorgestellt. Dies ist zweifellos ein sehr nützlicher praktischer Fall für Entwickler, die JavaScript lernen.
Das obige ist der detaillierte Inhalt vonJavaScript implementiert einen ziehbaren Baum. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!