Setelah datang ke DRAG dan DROP untuk pertama kalinya, saya menemukan deskripsi yang sangat sulit (Ini adalah pendapat subjektif saya. Saya meminta Anda untuk tidak setuju dengannya, tetapi untuk membaca kembali segala sesuatu yang mungkin dan melihat pertanyaan ini dari berbagai sudut). Dan saya memutuskan untuk menulis beberapa artikel yang ditujukan untuk pengembang pemula yang ingin belajar Zen.
Artikel akan terdiri dari dua bagian:
- Metode untuk membuat efek DRAG dan DROP.
- Aplikasi praktis dari pengetahuan yang diperoleh untuk membuat penyortiran menggunakan DRAG dan DROP
Paragraf No. 1 Metode menciptakan efek DRAG dan DROP
Sebelum memulai analisis mendalam, mari kita lihat secara dangkal. Bayangkan diri Anda sebagai pemuat, Anda perlu memindahkan kotak dari satu tempat ke tempat lain. Untuk loader, “Baiklah, saya ambil, ya, saya transfer. Done! ", Dan untuk programmer," Aku pergi ke kotak, membungkuk, mengambil kotak, mengambil kotak, berjalan N langkah, membungkuk, melepaskan kotak. ". Maksud saya, sebelum mulai bekerja, kehilangan semua yang ada di kepala Anda, dalam langkah-langkah dan Anda akan menjadi lebih dekat dengan kebenaran.
Saya ingin membuat reservasi bahwa ada beberapa metode untuk membuat efek ini dan pastikan untuk membaca tentang semuanya. Saya akan mengambil keuntungan dari yang saat ini saya anggap paling nyaman.
Saat membuat DRAG dan DROP, langkah pertama adalah mengatur objek yang akan kita pindahkan ke draggable = 'true'.
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> </body> </html>
,
Pada tahap pertama saya ingin menunjukkan proses itu sendiri, dan setelah itu kami akan menyebarkannya ke semua objek. Kami saat ini bekerja di JS, dan seperti yang Anda ketahui, ada berbagai acara di browser tempat kami dapat melampirkan rangkaian tindakan kami sendiri. Mari kita lihat acara yang diperlukan untuk membuat DRAG dan DROP:
dragstart - terjadi ketika pengguna mulai menyeret item.
seret - terjadi ketika suatu item diseret.
dragend - terjadi ketika pengguna selesai menyeret item.
dragenter - terjadi ketika item yang diseret menyentuh target.
dragleave - terjadi ketika item yang diseret meninggalkan target.
dragover - terjadi ketika item yang diseret berada di atas target.
drop - terjadi ketika item yang diseret jatuh ke target.
Sekarang informasi yang sangat penting! Acara dibagi menjadi dua kelompok. Untuk item yang dipindahkan (item yang kami seret): dragstart, Drag, Dragend. Untuk elemen penerima (tempat kami menyeretnya): Dragenter, Dragleave, Dragover, Drop. Dan peristiwa-peristiwa ini tidak dapat bekerja sebaliknya, tetapi mereka dapat bekerja tanpa satu sama lain.
Misalnya: Anda harus memindahkan objek dan membiarkannya di tempat kami melepaskan tombol mouse. Tugas ini tidak memerlukan bagian host.
<html> <head> <style> .ddd { display:block; float:left; padding:10px; border:1px solid #000; } </style> </head> <body> <div id='d1' class='ddd' draggable='true'>Pervii 1</div> <div id='d2' class='ddd'>Vtoroy 2</div> <div id='d3' class='ddd'>Tretii 3</div> <div id='d4' class='ddd'>Chetverty 4</div> <div id='d5' class='ddd'>Pyatii 5</div> <script> var d1 = document.getElementById('d1'); var startCursorX; var startCursorY; var startX; var startY; d1.addEventListener('dragstart',function() { startCursorX = event.pageX;</script> </body> </html>
Tidak diragukan lagi, contoh dilakukan pada lutut, tetapi itu dengan sempurna menggambarkan opsionalitas objek penerima.
Saya menganggap contoh dengan kejadian terpisah menjadi tidak ada, karena jika di baris
d1.addEventListener ('dragstart', function () { Anda mengganti 'dragstart' dengan acara lain, Anda dapat bermain dengannya dan mendapatkan hasil yang menarik. , mainkan dan perlihatkan apa yang tampak tidak biasa dan menarik bagi Anda di komentar, sehingga semua orang akan belajar banyak dan dapat mengulanginya sendiri.
Paragraf No. 2. DROP tidak berfungsi di DRAG dan DROP
Ketika Anda mencoba semua acara, Anda akan menemukan bahwa drop tidak berfungsi. Ini adalah pengembang metode ini yang membuat atat untuk mereka yang memutuskan "Dan hanya itu ... Hah, omong kosong."
Nah, semuanya sederhana, sebelum acara drop, Anda harus menggantung acara di elemen yang sama
d2.addEventListener('dragover',function() { event.preventDefault(); });
Anggap ini sebagai fakta, itu tidak akan berhasil tanpanya.