JavaScript implementiert einen ziehbaren Baum

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: []
        }]
    }]
}

Als Baumstruktur gerendert, sollte sie so aussehen:

- 节点A
  |- 子节点A1
  |- 子节点A2
     |- 子节点A2-1

2. 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>

2. 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);
});

3. 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;
    }
}

• 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;
    }
}

• 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;
    }
}

• 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);
    }
}

• 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;
}

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!