Bagaimanakah JavaScript melaksanakan fungsi seret dan isih elemen halaman?

Bagaimanakah JavaScript melaksanakan fungsi seret dan isih elemen halaman?

Dalam pembangunan web moden, pengisihan seret ialah ciri yang sangat biasa, yang membolehkan pengguna menukar kedudukan mereka pada halaman dengan menyeret elemen. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi seret dan isih elemen halaman dan memberikan contoh kod khusus.

Idea asas untuk melaksanakan fungsi pengisihan seret adalah seperti berikut:

1. Mula-mula, cipta elemen yang memerlukan pengisihan seret dalam HTML, seperti set div.

   元素1
    
   元素2
    
   元素3
    
   元素4

   Salin selepas log masuk

2. Gunakan CSS untuk menetapkan elemen ini sebagai boleh seret:

   .sortable { cursor: grab; }

   Salin selepas log masuk

3. Ikat pendengar acara kepada setiap elemen boleh seret untuk mendengar permulaan seret, proses seret dan acara tamat seret:

   const sortables = document.querySelectorAll('.sortable'); let draggingElement = null; sortables.forEach(sortable => { sortable.addEventListener('dragstart', dragStart); sortable.addEventListener('dragover', dragOver); sortable.addEventListener('dragend', dragEnd); });

   Salin selepas log masuk
4. Simpan dalam elemen seret acara mula seret dan tetapkan kesan seretan:

   function dragStart(e) { draggingElement = this; this.classList.add('dragging'); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); }

   Salin selepas log masuk

5. Hentikan kelakuan lalai dalam acara proses seret dan tetapkan kesan seret:

   function dragOver(e) { e.preventDefault(); this.classList.add('dragover'); e.dataTransfer.dropEffect = 'move'; }

   Salin selepas log masuk

6. dalam Kemas kini kedudukan elemen dalam acara akhir seret dan alih keluar gaya berkaitan seret :

   function dragEnd(e) { this.classList.remove('dragging', 'dragover'); const dropzone = document.querySelector('.dragover'); if (dropzone && dropzone !== this) { const parentNode = this.parentNode; parentNode.insertBefore(this, dropzone.nextSibling); } draggingElement = null; }

   Salin selepas log masuk

Dengan kod di atas, kami boleh melaksanakan fungsi seret-dan-isih mudah untuk elemen halaman. Apabila pengguna menyeret elemen, elemen lain melaraskan kedudukannya secara automatik, membenarkan elemen disusun semula.

Dalam contoh di atas, kami menggunakan API seret dan lepas HTML5 untuk melaksanakan fungsi pengisihan seret. API seret dan lepas termasuk satu siri acara dan kaedah berkaitan seret dan lepas yang membantu kami mengendalikan operasi seret dan lepas pada elemen.

Perlu diambil perhatian bahawa kod dalam contoh di atas hanya melaksanakan fungsi pengisihan seret Dalam aplikasi sebenar, beberapa keadaan khas mungkin perlu dipertimbangkan, seperti mengisih sejumlah besar elemen, menyusun elemen bersarang, dsb. Selain itu, disebabkan perbezaan dalam keserasian API seret dan lepas dalam penyemak imbas yang berbeza, pembangun mungkin perlu melakukan pemprosesan keserasian.

Ringkasnya, JavaScript boleh melaksanakan fungsi drag-and-sort elemen halaman melalui API drag-and-drop. Semoga contoh di atas dapat membantu anda!

Atas ialah kandungan terperinci Bagaimanakah JavaScript melaksanakan fungsi seret dan isih elemen halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!