API HTML5 glisser-déposer pour implémenter l'exemple de code pour le tri glisser-déposer

HTML5 fournit une API Drags-et-Drop, qui est grandement pratique pour nous pour réaliser l'effet de traînée et de dépôt. pour atteindre diverses fonctions de glisser-déposer.

Si vous souhaitez faire glisser et supprimer un certain élément, vous devez définir la propriété draggable de l'élément sur true. Les éléments IMG et les éléments sont définis avec des attributs draggables à true, qui peuvent être directement traînés et abandonnés.

Les incidents de glisser-déposer sont générés par différents éléments. Un élément est traîné et tombé, et il pourrait éventuellement atteindre l'élément qu'il veut placer sur de nombreux éléments. Ici, je me réfère temporairement à l'élément de la traînée et de la chute et de l'élément du processus, et l'élément que j'ai atteint est appelé l'objet cible. Différents objets ont différents événements de glisser-déposer.

Objet source:

1. DragStart: l'objet source commence à glisser et à tomber.
2. Glisser: pendant le glisser-déposer de l'objet source.
3. Dragend: l'objet source glisser et dépose.

Objet de processus:

1. DRAGENTER: les objets source commencent à entrer dans la plage du processus.
2. Dragover: l'objet source se déplace dans la plage du processus.
3. DragLeave: la portée de l'objet de la source quittant le processus.

Objet cible:

1. Drop: l'objet source est glissé et déposé dans l'objet cible.

 <div id = source draggable = true> un élément </ div> <div id = process> b élément </div> <div id = cible> c élément </div> <cript> var source = document.getElementByid '( 'Source'), // un élément proces = document.getElementById ('process'), // b cible = document.gementById ('cible'); Les événements de dragstart sont générés par l'élément A pour générer console.log ('un élément commence à être gêné');}, false) proces.adDeventRristEner ('Dragner', fonction (ev) {// L'événement dragsenter est généré par le b élément. , False) Target.adDeventListener ('Drop', fonction (ev) {// L'événement Drop est généré par console.log ('un élément a un élément c');) document.ondragover = function (e) {e.PreventDefault ( );} </ script>

Un DataTransfer d'objets de transmission de données est fourni dans tous les événements glisser-et-Drop pour transmettre des données entre les objets source et les objets cibles. Ensuite, apprenez à connaître les méthodes et les attributs de cet objet pour comprendre comment il transmet des données.

Cette méthode est stockée dans l'objet Datatransfer. Recevez deux paramètres, le premier indique une chaîne pour stocker le type de données, et prend maintenant en charge les éléments suivants:

1. Texte / Plain: texte texte.
2. Texte / HTML: texte HTML.
3. Texte / XML: texte XML.
4. Texte / URI-list: Liste d'URL, chaque URL est une ligne.

Le deuxième paramètre est les données à stocker. Par exemple:

 event.datatransfer.setData («texte / plaine», «bonjour monde»);

Cette méthode lit les données de l'objet DataTransfer. Le paramètre est le type de données spécifié dans SetData. Par exemple:

 event.datatransfer.getData ('texte / plaine');

Cette méthode supprime les données stockées dans l'objet Datatransfer. Les paramètres sont facultatifs, pour les types de données. Si les paramètres sont vides, effacez tous les types de données. Par exemple:

 event.datatransfer.cleardata ();

Cette méthode est définie sur les icônes glisser-déposer en utilisant des éléments IMG. Recevez les trois paramètres, le premier est l'élément icône, le second est le déplacement de l'axe x de l'élément icône du pointeur de la souris, et le troisième est le déplacement de l'axe y de l'élément icône du pointeur de la souris. Par exemple:

 Var source = document.getElementyid ('source'), icône = document.CreateElement ('img'); icon.src = 'img.png'; 10, -10)}, faux)

Ces deux attributs sont combinés pour définir l'effet visuel de la traînée et de la chute.

Il convient de noter que IE ne prend pas en charge l'objet Datatransfer. Oui, peu importe quelle version IE est prise en charge.

L'utilisation des API Drag and Drop connaît déjà ce qui précède. Jetons un coup d'œil à l'idée d'abord:

1. Dans une liste, chaque élément peut être traîné et abandonné, et la propriété Draggable est définie sur true pour chaque élément.
2. L'enquête sur l'événement DragStart de chaque élément pour distinguer le style de l'objet source.
3. Lors de la surveillance de l'événement DragEnter de chaque élément, lorsque l'objet source entre dans l'élément actuel, l'objet source est ajouté avant l'élément. De cette façon, les éléments derrière seront pressés par l'objet source, réalisant l'effet de tri.
4. Cependant, il sera constaté que l'objet source ne peut pas être classé au dernier et ne peut être que le deuxième de l'avant-dernier. À l'heure actuelle, l'événement DragLeave est surveillé.

Le code principal est le suivant:

 var source = document.QuerySelectiverall ('. list'), drageelement = null; ) {drageelement = this;}, false); source [i] .adDeventListener ('dragenter', function (ev) {if (drageelement! = this) {this.parentNodefore [i] .addeventListener ('dragleave', function (ev) {if (drageelement! = this) {if (this == this.parentnode.lastelementchildchild || this.parentNod e.lastchild) {this.parentNode.ApendChild (draglements );}}, false)};

Adresse de code complète: Drag-Demo

Il est principalement compatible dans IE, mais au moins il peut être traîné et trié au moins dans IE10.

Et dans mon test simple, on constate que lorsque les éléments ne sont pas définis dans IE, l'événement DragLeave ne sera pas déclenché.

Le point le plus important est sur iOS et Android, ce qui est complètement incompatible. Heureusement, il y a un plug -in pour le rendre parfaitement compatible à l'extrémité mobile.

Adresse du plug-in: iOS-HTML5-Drag-Drop-Shim

Il vous suffit d'introduire la fiche dans le code d'origine pour le faire glisser sur le terminal mobile.

 <Script> var iOSDragDropShim = {autorisationLave: true} </ script> <script src = vendor / ios-drop.js> </ script>

Ce qui précède est tout le contenu de cet article.