Latih drag dan lepas API di html5 untuk mewujudkan daftar drag and lepas! Artikel Referensi: JS HTML5 Drag dan Jatuhkan Pratinjau Gambar Unggah
Implementasi HTML5 Drag and Drop Mobile List:
1. Loop untuk mengatur atribut yang dapat diseret dari setiap anak, dan atur tanda seret (tidak lebih dari satu atau semua anak akan dipindahkan)
2. Setiap kali Anda memasuki area pengiriman, akan ada tanda drag and drop selama deteksi, dan jika ada, tambahkan elemen DOM, dan sebagainya.
Gagasan implementasi lainnya adalah: Anda dapat menggunakan objek DataTransfer di Drag and Drop sebagai properti, menggunakan metode setData () dan getData () untuk melewati ID dari setiap anak yang diseret, dan menemukan anak yang ditentukan untuk pindah ... untuk bereksperimen. . .
Html:
// Daftar Kosong <Div ID = "Box"> </div> // Daftar Konten <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; // Loop untuk mengatur properti yang dapat diseret dari setiap anak, dan seret tanda pada waktunya untuk (; i <len; i += 1) {lidoms [i] .draggable = 'true'; Lidom [i] .flag = false; lidom [i] .ondragStart = function () {this.flag = true; }; lidoms [i] .ondragend = function () {this.flag = false; }; } // acara trender $ ("box"). Ongdragenter = function (e) {e.preventDefault (); console.log ('entri'); }; $ ("box"). ontdragover = function (e) {e.preventdefault (); console.log ('move'); }; $ ("box"). ontdragleave = function (e) {e.preventdefault (); console.log ('cuti'); }; $ ("box"). ontdragleave = function (e) {e.preventdefault (); untuk (var i = 0; i <lidoms.length; i += 1) {if (lidoms [i] .flag) {box.appendChild (lidoms [i]); }} console.log ('Success'); }; // Area Area Trouting $ ("Con"). OnDrager = function (e) {e.preventDefault (); console.log ('enter'); }; $ ("con"). ontdragover = function (e) {e.preventdefault (); console.log ('move'); }; $ ("con"). ontdragover = function (e) {e.preventdefault (); console.log ('cuti'); }; $ ("con"). oncrop = function (e) {e.preventdefault (); untuk (var i = 0; i <lidoms.length; i += 1) {if (lidoms [i] .flag) {// Pada saat ini, objek kotak adalah li, bukan li wadah asli li. $ ("Con"). AppendChild (Lidoms [i]); }} console.log ('Success'); }; </script>Gambar reproduksi:
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.