Étant venu pour la première fois à DRAG et DROP, j'en suis tombé sur une description très difficile (c'est mon opinion subjective. Je vous demande de ne pas être d'accord avec lui, mais de relire tout ce qui est possible et de regarder cette question sous plusieurs angles). Et j'ai décidé d'écrire quelques articles destinés aux développeurs débutants qui veulent apprendre le Zen.
L'article comprendra deux parties:
- Méthode de création d'effets DRAG et DROP.
- Application pratique des connaissances acquises pour créer le tri à l'aide de DRAG et DROP
Paragraphe n ° 1 Méthode de création de l'effet DRAG et DROP
Avant de commencer une analyse approfondie, regardons superficiellement. Imaginez-vous en tant que chargeur, vous devez déplacer la boîte d'un endroit à un autre. Pour le chargeur, «Eh bien, je l'ai pris, eh bien, je l'ai transféré. Terminé! », Et pour le programmeur,« je suis allé dans la boîte, je me suis penché, j'ai pris la boîte, j'ai ramassé la boîte, j'ai fait N pas, je me suis penché, j'ai lâché la boîte. ». Je veux dire, avant de commencer à travailler, tout perdre dans votre tête, par étapes et vous vous rapprocherez beaucoup plus de la vérité.
Je veux faire une réserve qu'il existe plusieurs méthodes pour créer cet effet et assurez-vous de tout lire. Je vais profiter de celle que je considère actuellement la plus pratique.
Lors de la création de DRAG et DROP, la première étape consiste à définir l'objet que nous déplacerons vers draggable = 'true'.
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> </body> </html>
,
À la première étape, je veux montrer le processus lui-même, puis nous le diffuserons à tous les objets. Nous travaillons actuellement dans JS, et comme vous le savez, il existe divers événements dans le navigateur auxquels nous pouvons attacher nos propres séquences d'actions. Regardons les événements nécessaires pour créer DRAG et DROP:
dragstart - se produit lorsque l'utilisateur commence à faire glisser un élément.
glisser - se produit lorsqu'un élément est déplacé.
dragend - se produit lorsque l'utilisateur a fini de faire glisser l'élément.
dragenter - se produit lorsque l'élément glissé atteint la cible.
dragleave - se produit lorsque l'élément déplacé quitte la cible.
dragover - se produit lorsque l'élément glissé est au-dessus de la cible.
drop - se produit lorsque l'élément déplacé tombe sur la cible.
Maintenant des informations très importantes! Les événements sont divisés en deux groupes. Pour l'élément déplacé (celui que nous faisons glisser): dragstart, Drag, Dragend. Pour l'élément récepteur (où nous le faisons glisser): Dragenter, Dragleave, Dragover, Drop. Et ces événements ne peuvent pas fonctionner dans l'autre sens, mais ils peuvent fonctionner les uns sans les autres.
Par exemple: vous devez déplacer l'objet et le laisser là où nous avons relâché le bouton de la souris. Cette tâche ne nécessite pas de pièce hôte.
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> <div id='d2' class='ddd'>Vtoroy 2</div> <div id='d3' class='ddd'>Tretii 3</div> <div id='d4' class='ddd'>Chetverty 4</div> <div id='d5' class='ddd'>Pyatii 5</div> <script> var d1 = document.getElementById('d1'); var startCursorX; var startCursorY; var startX; var startY; d1.addEventListener('dragstart',function() { startCursorX = event.pageX;</script> </body> </html>
Sans aucun doute, l'exemple se fait sur le genou, mais il illustre parfaitement le caractère facultatif de l'objet récepteur.
Je considère les exemples avec des événements séparés comme rien, car si dans la ligne
d1.addEventListener ('dragstart', function () { vous remplacez 'dragstart' par n'importe quel autre événement, vous pouvez jouer avec et obtenir des résultats intéressants. , jouez et montrez ce qui vous a semblé inhabituel et intéressant dans les commentaires, afin que tout le monde apprenne beaucoup et puisse le répéter lui-même.
Paragraphe n ° 2. DROP ne fonctionne pas dans DRAG et DROP
Lorsque vous essayez tous les événements, vous constaterez que la suppression ne fonctionne pas. Ce sont les développeurs de cette méthode qui font l’atat à ceux qui ont décidé "Et c’est tout ... Hoh, non-sens."
Eh bien, tout est simple, avant l'événement drop, vous devez accrocher un événement sur le même élément
d2.addEventListener('dragover',function() { event.preventDefault(); });
Prenez cela comme un fait, cela ne fonctionnera pas sans lui.