Pratiquez l'API Drag and Drop dans HTML5 pour réaliser la liste des mouvements de glisser-déposer! Article de référence: JS HTML5 glisser-déposer un aperçu de l'image de téléchargement
Implémentation de la liste mobile HTML5 Drag and Drop:
1. Loop pour définir l'attribut draggable de chaque enfant et définir la marque de traînée (pas plus d'un ou tous les enfants seront déplacés)
2. Chaque fois que vous entrez dans la zone de livraison, il y aura une marque de traînée et de dépôt pendant la détection, et s'il y en a, ajoutez l'élément DOM, etc.
Une autre idée d'implémentation est: vous pouvez utiliser l'objet DataTransfer dans Drag and Drop en tant que propriété, utiliser les méthodes SetData () et GetData () pour transmettre l'ID de chaque enfant traîné et trouver l'enfant spécifié pour se déplacer ... pour expérimenter. . .
HTML:
// Liste vide <div id = "box"> </ div> // Liste de contenu <ul id = "Con"> <li> Article 1 </li> <li> Article 2 </li> <li> Article 3 </li> <li> Article 4 </li> </ul>
JS:
<Script> Fonction $ (id) {return document.getElementById (id); } var con = $ ("con"); var box = $ ("box"); var lidoms = document.getElementsByTagName ("li"); var i = 0, len = lidoms.length; // boucle pour définir la propriété draggable de chaque enfant, et faites glisser la marque dans le temps pour (; i <len; i + = 1) {lidoms [i] .Draggable = 'true'; lidoms [i] .flag = false; lidoms [i] .ondRagStart = function () {this.flag = true; }; lidoms [i] .ondragend = function () {this.flag = false; }; } // event de tendance $ ("box"). OnDrageNer = function (e) {e.PreventDefault (); console.log («entrée»); }; $ ("box"). ondragover = fonction (e) {e.PreventDefault (); console.log ('move'); }; $ ("box"). ondragleave = fonction (e) {e.PreventDefault (); Console.log («laisse»); }; $ ("box"). ondragleave = fonction (e) {e.PreventDefault (); pour (var i = 0; i <lidoms.length; i + = 1) {if (lidoms [i] .flag) {box.appendChild (lidoms [i]); }} console.log ('succès'); }; // Événement de la zone de truite $ ("con"). Ondrager = fonction (e) {e.PreventDefault (); console.log («Entrée»); }; $ ("con"). ondragover = fonction (e) {e.PreventDefault (); console.log ('move'); }; $ ("con"). ondragover = fonction (e) {e.PreventDefault (); Console.log («laisse»); }; $ ("con"). ondrop = function (e) {e.PreventDefault (); pour (var i = 0; i <lidoms.length; i + = 1) {if (lidoms [i] .flag) {// Pour le moment, l'objet de la boîte est li, pas le li. $ ("con"). appendchild (lidoms [i]); }} console.log ('succès'); }; </cript>Image de reproduction:
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.