JavaScript implémente une arborescence déplaçable

À mesure que les applications Web sont de plus en plus utilisées, nous devons de plus en plus concevoir des méthodes d'interaction plus efficaces avec les pages Web. L’une d’elles consiste à utiliser JavaScript pour implémenter une arborescence déplaçable (Drag & Drop Tree). Cet article expliquera comment utiliser JavaScript pour créer une arborescence déplaçable, détaillant le processus de mise en œuvre et les détails techniques associés.

1. Objectifs atteints

L'arbre déplaçable décrit dans cet article fait référence à une structure sur une page Web qui contient des nœuds d'une structure arborescente, et nous pouvons réorganiser leurs relations hiérarchiques par glisser-déposer. Pour mettre en œuvre un tel arbre, les deux aspects clés suivants doivent être complétés.

1. Implémentation de la structure arborescente

Nous devons d'abord créer des nœuds pour la structure arborescente dans la page et déterminer les niveaux et les relations entre les nœuds . Ces contenus peuvent être représentés en utilisant JSON. Par exemple, nous pouvons stocker la structure de l'arborescence au format JSON suivant :

{
    name: "节点A",
    children: [{
        name: "子节点A1",
        children: []
    }, {
        name: "子节点A2",
        children: [{
            name: "子节点A2-1",
            children: []
        }]
    }]
}

Lorsqu'elle est rendue sous forme d'arborescence, elle devrait ressembler à ceci :

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

#🎜 🎜#Implémentation Fonction glisser-déposer

Autoriser le glisser-déposer des nœuds nécessite l'utilisation de certaines techniques JavaScript. Concernant l'API glisser-déposer, de manière générale, elle implique trois catégories :

Dragable element
Place target element
Dragging data

Grâce à ces API, nous pouvons facilement implémenter la fonction de glissement des nœuds.

2. Détails techniques

Après avoir compris nos objectifs, discutons maintenant en détail des détails de mise en œuvre. Voici les étapes à mettre en œuvre :

Construire une arborescence

Nous devons d'abord créer des éléments de nœud et les ajouter au HTML, généralement en utilisant Implémenté au niveau des éléments ul et li. Pour chaque nœud, un élément li est requis et davantage d'éléments li doivent être imbriqués dans le nœud enfant ul. Afin d'associer l'arborescence aux données JSON, vous pouvez utiliser les attributs data-* pour stocker les données JSON dans l'élément li correspondant.

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

Ajouter des événements de glisser aux nœuds

Nous devons ajouter des événements de glisser pour chaque nœud, y compris mousedown, dragstart, dragover, dragleave, drop et dragend. Parmi eux, les événements mousedown et dragstart doivent être traités avant le début du glisser, et le traitement ultérieur est respectivement dragover, dragleave, drop et dragend. Les fonctions de gestion de ces événements glisser-déposer peuvent être complétées via des écouteurs d'événements.

// 获取所有节点并添加事件监听器
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);
});

Implémentation de la fonction de gestionnaire de l'événement drag

La fonction de gestionnaire de l'événement drag est quelque peu complexe et nécessite une conception minutieuse de chaque étape de l’opération. Voici les instructions pour chaque étape :

mousedown : Enregistrez l'élément où le glissement commence et définissez isDragged sur true.
dragstart : Définissez le type de transmission de données et les données à transmettre. De plus, il est nécessaire de déterminer si l'opération de glissement peut être effectuée en fonction de l'état de isDragged. Pour définir le type de transmission de données, vous pouvez utiliser la méthode setData().

function onDragStart(event) {
    if (!isDragged) {
        draggedItem = event.currentTarget.parentNode;
        event.dataTransfer.setData('text/plain', event.currentTarget.dataset.name);
        isDragged = true;
    }
}

dragover : Empêche l'événement par défaut et ajoute l'attribut isOver sur l'élément actuel. Cet attribut indique que l'élément actuel est placé au-dessus des autres éléments et peut être placé. Les événements par défaut peuvent être évités via la méthode event.preventDefault().

function onDragOver(event) {
    event.preventDefault();
    if (!event.currentTarget.dataset.isOver) {
        event.currentTarget.parentNode.classList.add('over');
        event.currentTarget.dataset.isOver = true;
    }
}

dragleave : Supprime l'attribut over de l'élément actuel, indiquant qu'aucune souris ne survole l'élément.

function onDragLeave(event) {
    if (event.currentTarget.dataset.isOver) {
        event.currentTarget.parentNode.classList.remove('over');
        event.currentTarget.dataset.isOver = false;
    }
}

drop : Déterminez si l'opération de placement peut être effectuée en fonction du fait que l'élément actuel possède l'attribut over. Si cela ne fonctionne pas, quittez directement ; si cela fonctionne, effectuez une opération de placement et ajustez l'arborescence.

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 : implémente l'événement de fin de l'opération de glisser. Dans ce cas, réinitialisez la valeur de isDragged et supprimez tous les attributs.

function onDragEnd(event) {
    event.currentTarget.parentNode.classList.remove('over');
    event.currentTarget.dataset.isOver = false;
    isDragged = false;
}

3. Code complet

Enfin, nous intégrons le code Javascript ci-dessus pour afficher une arborescence déplaçable complète. Vous pouvez utiliser le code directement, le copier dans un éditeur de texte, l'enregistrer sous forme de fichier HTML et l'exécuter dans le navigateur.

    
    
    


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

Grâce à l'implémentation du code ci-dessus, nous avons réussi à créer une structure arborescente déplaçable dans la page Web, les utilisateurs peuvent facilement ajuster la structure arborescente par glisser-déposer. Dans le même temps, nous avons également présenté en détail divers détails techniques au cours du processus de mise en œuvre. Il s'agit sans aucun doute d'un cas pratique très utile pour les développeurs qui apprennent JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!