Home-theater-designers
Seret dan lepas ialah ciri penting yang meningkatkan interaksi pengguna dan memudahkan pengalaman pengguna yang lancar. Sama ada anda ingin membina pemuat naik fail, senarai boleh diisih atau permainan interaktif, memahami cara memanfaatkan keupayaan API ini ialah kemahiran penting yang perlu ada dalam kit alat pembangunan web anda.
Video MUO pada hari itu SCROLL UNTUK MENERUSKAN KANDUNGAN
Asas Seret dan Lepas dalam HTML
Dalam sistem drag-and-drop biasa, terdapat dua jenis elemen: jenis pertama terdiri daripada elemen boleh seret yang pengguna boleh alihkan dengan tetikus dan jenis kedua termasuk elemen boleh jatuh yang biasanya menentukan tempat pengguna boleh meletakkan elemen.
Untuk melaksanakan seret dan lepas, anda perlu memberitahu penyemak imbas elemen yang anda mahu boleh seret. Untuk menjadikan elemen boleh diseret oleh pengguna, elemen itu harus mempunyai a boleh diseret atribut HTML ditetapkan untuk benar , seperti ini:
bagaimana anda mencari mesej yang dihapuskan di facebook?
<div draggable="true">This element is draggable</div>
Apabila pengguna mula melancarkan acara seret, penyemak imbas membekalkan imej 'hantu' lalai yang biasanya memberikan maklum balas mengenai elemen yang diseret.
Anda boleh menyesuaikan imej ini dengan membekalkan imej anda sendiri. Untuk melakukan ini, pilih elemen boleh seret daripada DOM, buat imej baharu untuk mewakili imej maklum balas tersuai dan tambahkan seret permulaan seret pendengar acara seperti ini:
let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
event.dataTransfer.setDragImage(img, 10, 10);
})
Dalam blok kod di atas, the setDragImage kaedah mempunyai tiga parameter. Parameter pertama merujuk kepada imej. Parameter lain mewakili offset mendatar dan menegak bagi imej masing-masing. Apabila anda menjalankan kod dalam penyemak imbas dan mula menyeret elemen, anda akan melihat bahawa imej seret tersuai telah digantikan dengan set imej tersuai sebelum ini.
Jika anda ingin membenarkan penurunan, anda mesti menghalang tingkah laku lalai dengan membatalkan kedua-dua lebih tahan dan Dragover peristiwa, seperti ini:
const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
ev.preventDefault();
});
Memahami Antara Muka DragEvent
Ciri JavaScript a DragEvent antara muka yang mewakili interaksi drag-and-drop daripada pengguna. Di bawah ialah senarai jenis acara yang mungkin di bawah DragEvent antara muka.
- seret : Pengguna melancarkan acara ini sambil menyeret elemen.
- membawa : Peristiwa ini berlaku apabila operasi seretan tamat atau apabila pengguna mengganggunya. Operasi seret biasa boleh ditamatkan dengan melepaskan butang tetikus atau menekan kekunci escape.
- lebih tahan : Elemen yang diseret mencetuskan peristiwa ini apabila ia memasuki sasaran jatuh yang sah.
- dragleave : Apabila elemen yang diseret meninggalkan sasaran jatuh, peristiwa ini berlaku.
- Dragover : Apabila pengguna menyeret elemen boleh seret ke atas sasaran jatuh, acara tersebut akan berlaku.
- seret permulaan : Peristiwa menyala pada permulaan operasi seretan.
- jatuhkan : Pengguna mencetuskan peristiwa ini apabila mereka menjatuhkan elemen ke sasaran jatuh.