Penjelasan mendetail tentang operasi seret dan lepas asli Html5

Fungsi drag and drop H5 digunakan dalam pengembangan proyek baru-baru ini. Karena proyek yang ada menggunakan bucket keluarga VUE, plug-in vuedragable digunakan, tetapi keseluruhan prosesnya cukup rumit. Jadi saya memutuskan untuk mulai mempelajari prinsip drag and drop H5, dan kemudian menerapkannya pada kerangka kerja berbasis data. Untuk mengimplementasikan operasi seret dan lepas di H5, setidaknya diperlukan dua langkah: 1) Atur atribut draggable dari elemen objek yang ingin Anda seret dan lepas ke true (img dan elemen a mengizinkan seret dan lepas secara default); dan menyeret kode penanganan peristiwa yang relevan. Untuk kenyamanan pengujian, pertama-tama saya menggunakan perpustakaan jQuery untuk menyelesaikan fungsi dasar drag and drop.

Saat menyeret elemen yang dapat diseret sambil menahan mouse, elemen tersebut akan dipicu dalam urutan berikut:

dragstart -> seret -> seret

1. dragstart: Dipicu ketika mouse ditekan dan mulai menyeret (dipicu satu kali)
2. drag: Dipicu sambil menahan mouse dan menyeret (terus menerus dipicu)
3. dragend: Dipicu setelah melepaskan mouse (apakah elemen ditempatkan pada target penempatan yang valid atau target penempatan yang tidak valid)

Ketika elemen yang dapat diseret diseret ke dalam wadah, elemen tersebut akan dipicu dalam urutan berikut:

dragenter -> dragover -> drop

dragenter: Selama sebuah elemen diseret ke target drop, event dragenter akan terpicu.

dragover: dragenter diikuti oleh event dragover, dan event ini akan terus dipicu selama elemen yang diseret masih bergerak dalam jangkauan target drop.

dragleave: Saat elemen diseret keluar dari target penempatan, dragleave akan terpicu.

drop: Dipicu ketika elemen yang diseret ditempatkan pada elemen target

Dari mulai menyeret elemen hingga menempatkan elemen ke dalam area target, hal ini akan dipicu dengan urutan sebagai berikut:

dragstart->drag->dragenter->dragover->dragleave->drop->dragend

Jika kita menambahkan atribut draggable secara langsung ke suatu elemen, atribut tersebut dapat diseret langsung di Chrome dan Opera (tidak ada operasi pelepasan (seperti panah berubah menjadi tanda +)), tetapi tidak ada respons di Firefox.

 <ul class=canDrog> <li draggable=true id=1>Luar Biasa</li> <li draggable=true id=2>Bagus</li> <li draggable=true id=3>Sedang</li> <li draggable=true id=4>Buruk</li> </ul> <script> //Tidak ada kode JS</script>

Untuk mengatasi masalah ini, Anda harus mengikat event handler dragstart ke elemen drag dan memanggil fungsi event.dataTransfer.setData dalam fungsi ini.

 <script> <ul class=canDrog> <li draggable=true id=1>Luar Biasa</li> <li draggable=true id=2>Bagus</li> <li draggable=true id=3>Sedang</li > <li draggable=true id=4>Perbedaan</li> </ul> $('.canDrog > li').bind('dragstart',function(event){ //firefox Harus mengakses objek dataTransfer yang digunakan untuk komunikasi drag and drop event.dataTransfer.setData(Teks,'1');</script>

Logo yang dapat dirilis mungkin berbeda tergantung pada sistem operasinya. Di Mac Chrome, logo tersebut muncul sebagai logo melingkar dengan tanda '+' putih yang tertanam di dalamnya.

Solusinya adalah dengan mengikat event dragover ke container

 <ul class=canDrog> <li draggable=true id=1>Luar Biasa</li> <li draggable=true id=2>Bagus</li> <li draggable=true id=3>Sedang</li> <li draggable=true id=4>Perbedaan</li> </ul> <tabel class=dataTbl> <thead> <tr> <th style=width: 10%>Bagian/minggu</th> <th>Senin</th> <th>Selasa</th> <th>Rabu</th> <th>Kamis</th> <th>Jumat</th> </tr> </thead> <tbody > <tr> <td>Bagian 1</td> <td draggable=true ></td> <td draggable=true ></td> <td draggable=true ></td> <td draggable= true >< /td> <td draggable=true ></td> </tr> <!--Dihilangkan di sini--> </tbody> </table><script> $('.canDrog > li').bind('dragstart',function ( event){ //firefox harus mengakses objek dataTransfer yang digunakan untuk komunikasi drag and drop event.dataTransfer.setData(Text,'1' }); Chrome dan opera perlu menambahkan $(.dataTbl).bind(dragover,'td',function(e){ e.originalEvent.preventDefault(); }) </script>

Jika Anda melepaskan elemen yang diseret saat menggunakan Firefox, browser default akan membuka tab baru, seperti berikut

Hal ini karena browser menjalankan perilaku default setelah fungsi drop callback. Solusi yang biasa dilakukan adalah menambahkan kode yang mencegah eksekusi kejadian default dan mencegah penggelembungan di drop hook wadah drag.

 <script> //Lepaskan elemen ke dalam elemen saat ini $('.dataTbl').bind('drop','td',function(event){ console.log('+++drop'); event.preventDefault (); acara.stopPropagation(); </script>

Namun, jika elemen yang dapat diseret diseret ke tempat lain, masalah pembukaan tab baru akan tetap terjadi. Dalam hal ini, kode di atas dapat ditambahkan ke semua penampung.

Kode sumber: https://github.com/pluslicy/drag

Nanti kita akan mempelajari perpustakaan plug-in vuedraggable dan menerapkannya dalam kerangka vue.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.