Seret dan drop adalah fitur umum, yaitu, seret ke posisi lain setelah objek penangkapan.
Di HTML5, seret dan drop adalah bagian standar, dan elemen apa pun dapat diseret dan dijatuhkan.
Internet Explorer 9+, Firefox, Opera, Chrome, dan Safari Dukungan Menyeret.
Catatan: Safari 5.1.2 tidak mendukung seret.Contoh:
<! Style> <script> function alowdrop (EV) {ev.preventDefault ();} function drag (EV) {ev.DataTransfer.setData (teks, evraget.id);} function op (ev) {ev. var data = ev.datatransfer.getData (teks); = Drag1 src = img /bg_1.jpg draggable = true ontdragStart = drag (event) width = 300px heig ht = 180px /> </body> </html>Pertama -tama, untuk membuat elemen diseret, atur properti yang dapat diseret ke true: <img draggable = true>
Kemudian ditentukan apa yang terjadi ketika elemen diseret.
Dalam contoh di atas, properti OnDragStart memanggil fungsi, seret (peristiwa), yang menentukan data yang diseret.
Metode DataTransfer.SetData () Atur tipe data dan nilai data seret data: Function drag (ev) {ev.datatransfer.setData (text, ev.target.id);}Dalam contoh ini, tipe data adalah teks, dan nilainya adalah ID (drag1) yang dapat menyeret elemen.
Acara OnDragover menetapkan di mana harus menempatkan data yang diseret.Default, data/elemen tidak dapat ditempatkan di elemen lain. Jika Anda perlu mengatur penempatan yang diijinkan, kami harus mencegah pemrosesan elemen default.
Ini untuk menghubungi metode event.preventdefault () dari acara OnDragover : event.preventdefault ()
Ketika data seret ditempatkan, peristiwa drop terjadi.
Dalam contoh di atas, atribut OnDrop memanggil fungsi, drop (acara):
Function drop (ev) {ev.preventdefault ();Penjelasan Kode:
Hubungi preventDefault () untuk menghindari pemrosesan data default browser (perilaku default acara drop dibuka di tautan)
Dapatkan data yang diseret melalui metode DataTransfer.getData (Teks) . Metode ini akan kembali ke data apa pun dari jenis yang sama dalam metode setData ().
Data seret adalah ID dari elemen seret (drag1)
Elemen seret tambahan ke elemen penempatan (elemen target)
Seret bolak -balik:Jika Anda ingin berbelok bolak -balik di dua tempat, cukup ubah kode di atas.
Ubah kode dalam tubuh:
<body> <Div ID = Div1 oncrop = drop (event) oncragover = alluprop (event)> <img id = drag1 src = img/bg_1.jpg draggable = ventilasi true) lebar = tinggi 300px = 180px/> </div> <Div ID = Div2 OnDrop = Drop (Event) OnDragover = Alldrop (Event)> </div> </body>
Kemudian tambahkan#Div2 ke gaya gaya:
<Tipe Gaya = Teks/CSS> #Div1, #Div2 {Lebar: 360px;Ini bisa diseret bolak -balik.
Di atas adalah semua isi artikel ini.