Heim > Web-Frontend > Front-End-Fragen und Antworten > JavaScript implementiert einen ziehbaren Baum

JavaScript implementiert einen ziehbaren Baum

WBOY
Freigeben: 2023-05-12 10:17:37
Original
608 Leute haben es durchsucht

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.

  1. Implementierung der Baumstruktur

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: []
        }]
    }]
}
Nach dem Login kopieren

Als Baumstruktur gerendert, sollte sie so aussehen:

- 节点A
  |- 子节点A1
  |- 子节点A2
     |- 子节点A2-1
Nach dem Login kopieren
  1. Drag-and-Drop-Funktionalität implementieren

Knoten per Drag-and-Drop erstellen -drop erfordert etwas JavaScript-Technologie. APIs im Zusammenhang mit Drag & Drop umfassen im Allgemeinen drei Kategorien:

  • Schiebbare Elemente
  • Zielelemente platzieren
  • Daten ziehen

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:

  1. Erstellen Sie eine Baumstruktur.

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>
Nach dem Login kopieren
  1. Drag-Ereignisse zu Knoten hinzufügen

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);
});
Nach dem Login kopieren
  1. Implementierung der Verarbeitungsfunktion von Drag-and-Drop-Ereignissen

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:

  • mousedown: Zeichnen Sie das Element auf, bei dem das Ziehen beginnt, und setzen Sie „isDragged“ auf „true“.
  • Dragstart: Legen Sie den Datenübertragungstyp und die zu übertragenden Daten fest. Darüber hinaus muss anhand des Status von isDragged ermittelt werden, ob der Ziehvorgang ausgeführt werden kann. Um den Datenübertragungstyp festzulegen, können Sie die Methode setData() verwenden.
function onDragStart(event) {
    if (!isDragged) {
        draggedItem = event.currentTarget.parentNode;
        event.dataTransfer.setData('text/plain', event.currentTarget.dataset.name);
        isDragged = true;
    }
}
Nach dem Login kopieren
  • dragover: Verhindern Sie das Standardereignis und fügen Sie das isOver-Attribut zum aktuellen Element hinzu. Dieses Attribut gibt an, dass das aktuelle Element über anderen Elementen platziert ist und platziert werden kann. Standardereignisse können durch die Methode event.preventDefault() verhindert werden.
function onDragOver(event) {
    event.preventDefault();
    if (!event.currentTarget.dataset.isOver) {
        event.currentTarget.parentNode.classList.add('over');
        event.currentTarget.dataset.isOver = true;
    }
}
Nach dem Login kopieren
  • dragleave: Entfernen Sie das Over-Attribut des aktuellen Elements, um anzuzeigen, dass sich keine Maus über dem Element befindet.
function onDragLeave(event) {
    if (event.currentTarget.dataset.isOver) {
        event.currentTarget.parentNode.classList.remove('over');
        event.currentTarget.dataset.isOver = false;
    }
}
Nach dem Login kopieren
  • drop: Bestimmen Sie, ob der Platzierungsvorgang basierend darauf durchgeführt werden kann, ob das aktuelle Element das Over-Attribut hat. Wenn es nicht funktioniert, beenden Sie es direkt. Wenn es funktioniert, führen Sie einen Platzierungsvorgang durch und passen Sie die Baumstruktur an.
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);
    }
}
Nach dem Login kopieren
  • dragend: implementiert das Beendigungsereignis des Drag-Vorgangs. Setzen Sie in diesem Fall den Wert von isDragged zurück und entfernen Sie alle Attribute.
function onDragEnd(event) {
    event.currentTarget.parentNode.classList.remove('over');
    event.currentTarget.dataset.isOver = false;
    isDragged = false;
}
Nach dem Login kopieren

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>

Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage