¡Practique la API de arrastrar y soltar en HTML5 para realizar el movimiento de arrastrar y soltar de la lista! Artículo de referencia: JS HTML5 arrastre y suelta la vista previa de la imagen de carga
Implementación de HTML5 Lista móvil de arrastre y soltación:
1. Bucle para establecer el atributo arrastrable de cada niño y establecer la marca de arrastre (no se moverán más de uno o todos los niños)
2. Cada vez que ingrese al área de entrega, habrá una marca de arrastre y caída durante la detección, y si lo existe, agregue el elemento DOM, y así sucesivamente.
Otra idea de implementación es: puede usar el objeto DataTransfer en arrastrar y soltar como una propiedad, usar los métodos setData () y getData () para pasar la ID de cada niño arrastrado y encontrar que el niño especificado se mueva ... para experimentar. . .
HTML:
// vacía list <div id = "box"> </div> // contenido list <ul id = "con"> <li> item 1 </li> <li> item 2 </li> <li> item 3 </li> <li> item 4 </li> </ul>
JS:
<script> function $ (id) {return document.getElementById (id); } var con = $ ("con"); var box = $ ("box"); var lidoms = document.getElementsBytagName ("li"); var i = 0, len = lidoms.length; // bucle para establecer la propiedad arrastrable de cada niño y arrastre la marca a tiempo para (; 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; }; } // evento Trender $ ("box"). OnDraGenter = function (e) {e.preventDefault (); console.log ('entrada'); }; $ ("box"). ondragover = function (e) {e.preventDefault (); console.log ('mover'); }; $ ("box"). ondragleeave = function (e) {e.preventDefault (); console.log ('Leave'); }; $ ("box"). ondragleeave = function (e) {e.preventDefault (); for (var i = 0; i <lidoms.length; i += 1) {if (lidoms [i] .flag) {box.appendChild (lidoms [i]); }} console.log ('éxito'); }; // Evento de área de trucha $ ("Con"). OnDrager = function (e) {E.PreventDefault (); console.log ('Enter'); }; $ ("Con"). Ondragover = function (e) {E.PreventDefault (); console.log ('mover'); }; $ ("Con"). Ondragover = function (e) {E.PreventDefault (); console.log ('Leave'); }; $ ("con"). ondrop = function (e) {e.preventDefault (); for (var i = 0; i <lidoms.length; i += 1) {if (lidoms [i] .flag) {// En este momento, el objeto de caja es li, no el li del contenedor original. $ ("Con"). AppendChild (lidoms [i]); }} console.log ('éxito'); }; </script>Imagen de reproducción:
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.