Comment JavaScript implémente-t-il la fonction glisser-trier des éléments de page ?

Comment JavaScript implémente-t-il la fonction glisser-trier des éléments de page ?

Dans le développement Web moderne, le tri par glisser-déposer est une fonctionnalité très courante, qui permet aux utilisateurs de modifier leur position sur la page en faisant glisser des éléments. Cet article explique comment utiliser JavaScript pour implémenter la fonction glisser-trier des éléments de page et fournit des exemples de code spécifiques.

L'idée de base de​​l'implémentation de la fonction de tri par glisser-déposer est la suivante :

1. Tout d'abord, créez des éléments qui nécessitent un tri par glisser-déposer en HTML, comme un ensemble de divs.

   <div class="sortable">元素1</div>
   <div class="sortable">元素2</div>
   <div class="sortable">元素3</div>
   <div class="sortable">元素4</div>

2. Utilisez CSS pour définir ces éléments comme déplaçables :

   .sortable {
     cursor: grab;
   }

3. Liez les écouteurs d'événements à chaque élément déplaçable pour écouter les événements de début, de processus et de fin de glisser :

   const sortables = document.querySelectorAll('.sortable');
   let draggingElement = null;
   
   sortables.forEach(sortable => {
     sortable.addEventListener('dragstart', dragStart);
     sortable.addEventListener('dragover', dragOver);
     sortable.addEventListener('dragend', dragEnd);
   });

4. Enregistrez l'élément déplacé dans le faites glisser l'événement de début et définissez l'effet de glisser :

   function dragStart(e) {
     draggingElement = this;
     this.classList.add('dragging');
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('text/html', this.innerHTML);
   }

5. Arrêtez le comportement par défaut dans l'événement de processus de glisser et définissez l'effet de glisser :

   function dragOver(e) {
     e.preventDefault();
     this.classList.add('dragover');
     e.dataTransfer.dropEffect = 'move';
   }

6. dans Mettez à jour la position de l'élément dans l'événement de fin de glisser et supprimez l'événement lié au glisser styles :

   function dragEnd(e) {
     this.classList.remove('dragging', 'dragover');
   
     const dropzone = document.querySelector('.dragover');
     if (dropzone && dropzone !== this) {
    const parentNode = this.parentNode;
    parentNode.insertBefore(this, dropzone.nextSibling);
     }
   
     draggingElement = null;
   }

Avec le code ci-dessus, nous pouvons implémenter une simple fonction de glisser-trier pour les éléments de la page. Lorsque l'utilisateur fait glisser un élément, les autres éléments ajustent automatiquement leurs positions, permettant ainsi de réorganiser les éléments.

Dans l'exemple ci-dessus, nous avons utilisé l'API glisser-déposer de HTML5 pour implémenter la fonction de tri par glisser-déposer. L'API glisser-déposer comprend une série d'événements et de méthodes liés au glisser-déposer qui nous aident à gérer les opérations de glisser-déposer sur les éléments.

Il convient de noter que le code de l'exemple ci-dessus implémente simplement la fonction de tri par glisser-déposer. Dans les applications réelles, certaines circonstances particulières peuvent devoir être prises en compte, telles que le tri d'un grand nombre d'éléments, le tri des éléments imbriqués, etc. De plus, en raison des différences de compatibilité des API glisser-déposer dans les différents navigateurs, les développeurs devront peut-être effectuer un traitement de compatibilité.

En résumé, JavaScript peut implémenter la fonction glisser-trier des éléments de page via l'API glisser-déposer. J'espère que les exemples ci-dessus vous seront utiles !

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!