Pratique a API de arrastar e soltar no HTML5 para realizar o movimento de arrastar e soltar! Artigo de referência: JS HTML5 Arraste e soltará a visualização da imagem de upload
Implementação da lista de dispositivos móveis de arrastar e arrastar HTML5:
1. Loop para definir o atributo arrastável de cada criança e definir a marca de arrasto (não mais que uma ou todas as crianças serão movidas)
2. Toda vez que você entrar na área de entrega, haverá uma marca de arrastar e cair durante a detecção e, se houver, adicione o elemento DOM e assim por diante.
Outra idéia de implementação é: você pode usar o objeto DataTransfer em arrasto e soltar como uma propriedade, usar os métodos setData () e getData () para passar o ID de cada criança arrastada e encontre a criança especificada para se mover ... para experimentar. . .
Html:
// Lista vazia <div id = "box"> </div> // Lista de conteúdo <ul id = "con"> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <li> Item 4 </li> </ul>
JS:
<Cript> function $ (id) {return document.getElementById (id); } var con = $ ("con"); var box = $ ("caixa"); var lidoms = document.getElementsByTagName ("li"); var i = 0, len = lidoms.length; // loop para definir a propriedade Draggable de cada criança e arrastar a marca a tempo 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 de Trender $ ("Box"). OnDragenter = function (e) {e.PreventDefault (); console.log ('entrada'); }; $ ("caixa"). console.log ('move'); }; $ ("caixa"). ONDRAGLEAVE = function (e) {e.PreventDefault (); console.log ('Leave'); }; $ ("caixa"). ONDRAGLEAVE = function (e) {e.PreventDefault (); for (var i = 0; i <lidoms.length; i += 1) {if (lidoms [i] .flag) {box.appendChild (lidoms [i]); }} console.log ('sucesso'); }; // Evento da área de truta $ ("con"). ONDRAGER = function (e) {e.PreventDefault (); console.log ('enter'); }; $ ("con"). OnDragover = function (e) {e.PreventDefault (); console.log ('move'); }; $ ("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) {// No momento, o objeto da caixa é li, não o li do contêiner original. $ ("CON"). AppendChild (Lidoms [i]); }} console.log ('sucesso'); }; </script>Imagem de reprodução:
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.