Üben Sie die Drag & Drop -API in HTML5, um die List Drag & Drop -Bewegung zu erkennen! Referenzartikel: JS HTML5 Drag & Drop -Upload -Bildvorschau hochladen
Implementierung von HTML5 Drag & Drop Mobile List:
1. Schleifen Sie Schleifen, um das draggable Attribut jedes Kindes festzulegen und die Drag -Marke zu setzen (nicht mehr als ein oder alle Kinder werden bewegt)
2. Jedes Mal, wenn Sie den Lieferbereich eingeben, gibt es während der Erkennung eine Drag & Drop -Marke und fügen Sie das DOM -Element und so weiter hinzu.
Eine weitere Implementierungsidee ist: Sie können das DataTransfer -Objekt in Drag & Drop als Eigenschaft verwenden, die Methoden SetData () und getData () verwenden, um die ID jedes gezogenen Kindes zu übergeben und das angegebene Kind zum Experimentieren zu finden. . .
HTML:
// leere Liste <div id = "box"> </div> // Inhaltsliste <ul id = "con"> <li> Punkt 1 </li> <li> Punkt 2 </li> <li> Punkt 3 </li> <li> Artikel 4 </li> </ul>
JS:
<Script> Funktion $ (id) {return document.getElementById (id); } var con = $ ("con"); var box = $ ("box"); var lidoms = document.getElementsByTagName ("li"); var i = 0, len = lidoms.length; // Schleifen Sie die draggable Eigenschaft jedes Kindes ein und ziehen Sie die Marke rechtzeitig für (; 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; }; } // Trender Ereignis $ ("Box"). ONDRAGENTER = Funktion (e) {e.preventDefault (); console.log ('Eintrag'); }; $ ("Box"). ONDRAGOver = Funktion (e) {e.preventDefault (); console.log ('move'); }; $ ("Box"). ONDRAGLEAVE = Funktion (e) {e.preventDefault (); console.log ('Urlaub'); }; $ ("Box"). ONDRAGLEAVE = Funktion (e) {e.preventDefault (); für (var i = 0; i <lidoms.length; i += 1) {if (lidoms [i] .flag) {box.AppendChild (lidoms [i]); }} console.log ('Erfolg'); }; // Trouting Area Ereignis $ ("con"). Ondrager = Funktion (e) {e.preventDefault (); console.log ('Enter'); }; $ ("con"). ONDRAGOver = Funktion (e) {e.preventDefault (); console.log ('move'); }; $ ("con"). ONDRAGOver = Funktion (e) {e.preventDefault (); console.log ('Urlaub'); }; $ ("con"). Ondrop = Funktion (e) {e.preventDefault (); für (var i = 0; i <lidoms.length; i += 1) {if (lidoms [i] .flag) {// zu diesem Zeitpunkt ist das Box -Objekt Li, nicht das li. $ ("con"). appendChild (lidoms [i]); }} console.log ('Erfolg'); }; </script>Reproduktionsbild:
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.