Selain properti yang tercantum di bawah, properti dari antarmuka induk, Event, tersedia
DragEvent.dataTransfer Baca sajaData yang ditransfer selama interaksi seret dan lepas
Dalam contoh ini, kami memiliki elemen yang dapat diseret di dalam wadah. Coba ambil elemen, seret, lalu lepaskan
HTML5 Drag and Drop API berarti kita dapat membuat hampir semua elemen di halaman kita dapat diseret. Dalam posting ini kami akan menjelaskan dasar-dasar drag and drop
Membuat konten yang dapat diseret
Perlu dicatat bahwa di sebagian besar browser, pemilihan teks, gambar, dan tautan dapat diseret secara default. Misalnya, jika Anda menyeret tautan di halaman web, Anda akan melihat kotak kecil berisi judul dan URL. Anda dapat meletakkan kotak ini di bilah alamat atau desktop untuk membuat pintasan atau menavigasi ke tautan. Untuk membuat jenis konten lain dapat diseret, Anda perlu menggunakan HTML5 Drag and Drop API
Untuk membuat objek yang dapat diseret, atur .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}0 pada elemen itu. Hampir semua hal dapat diaktifkan dengan drag. gambar, file, tautan, file, atau markup apa pun di halaman Anda
Contoh kami membuat antarmuka untuk mengatur ulang kolom yang telah ditata dengan CSS Grid. Markup dasar untuk kolom terlihat seperti ini, dengan setiap kolom memiliki atribut .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}1 yang disetel ke .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}2
<div draggable="true" class="box">A</div>
<div draggable="true" class="box">B</div>
<div draggable="true" class="box">C</div>
</div>
Inilah CSS untuk elemen wadah dan kotak. Perhatikan bahwa satu-satunya CSS yang terkait dengan fungsionalitas seret dan lepas adalah properti .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}3. Kode lainnya hanya mengontrol tata letak dan gaya elemen penampung dan kotak
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}
Pada titik ini Anda akan menemukan bahwa Anda dapat menyeret item, namun tidak ada lagi yang akan terjadi. Untuk menambahkan fungsionalitas seret dan lepas, kita perlu menggunakan JavaScript API
Mendengarkan peristiwa menyeret
Ada sejumlah acara berbeda untuk dilampirkan untuk memantau seluruh proses seret dan lepas
- .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}_4 - .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}5 - .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}_6 - .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}_7 - .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}_8 - .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}_9 - function handleDragStart(e) {
this.style.opacity = '0.4';
}
function handleDragEnd(e) {
this.style.opacity = '1';
}
let items = document.querySelectorAll('.container .box');
items.forEach(function (item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragend', handleDragEnd);
});0
Untuk menangani aliran seret dan lepas, Anda memerlukan semacam elemen sumber (tempat asal seret), muatan data (apa yang ingin Anda lepas), dan target (area untuk menangkap jatuhan). Elemen sumber dapat berupa gambar, daftar, tautan, objek file, blok HTML, dll. Targetnya adalah zona jatuhkan (atau kumpulan zona jatuhkan) yang menerima data yang coba dibuang oleh pengguna. Perlu diingat bahwa tidak semua elemen bisa menjadi target, misalnya gambar tidak bisa menjadi target
Memulai dan mengakhiri urutan seret dan lepas
Setelah Anda memiliki function handleDragStart(e) {
this.style.opacity = '0.4';
}
function handleDragEnd(e) {
this.style.opacity = '1';
}
let items = document.querySelectorAll('.container .box');
items.forEach(function (item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragend', handleDragEnd);
});1 atribut yang ditentukan pada konten Anda, lampirkan event handler .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}4 untuk memulai urutan seret dan lepas untuk setiap kolom
Kode ini akan menyetel opasitas kolom menjadi 40% saat pengguna mulai menyeretnya, lalu mengembalikannya ke 100% saat acara seret berakhir
function handleDragStart(e) {this.style.opacity = '0.4';
}
function handleDragEnd(e) {
this.style.opacity = '1';
}
let items = document.querySelectorAll('.container .box');
items.forEach(function (item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragend', handleDragEnd);
});
Hasilnya bisa dilihat pada demo Glitch di bawah ini. Seret item dan itu menjadi buram. Karena target peristiwa .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}_4 adalah elemen sumber, pengaturan function handleDragStart(e) {
this.style.opacity = '0.4';
}
function handleDragEnd(e) {
this.style.opacity = '1';
}
let items = document.querySelectorAll('.container .box');
items.forEach(function (item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragend', handleDragEnd);
});4 menjadi 40% memberikan umpan balik visual kepada pengguna bahwa elemen tersebut adalah pilihan saat ini yang sedang dipindahkan. Setelah Anda menjatuhkan item, meskipun fungsionalitas drop tidak ada, elemen sumber kembali ke opacity 100%
Tambahkan isyarat visual tambahan dengan .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}_6, .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}8, dan .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}7
Untuk membantu pengguna memahami cara berinteraksi dengan antarmuka Anda, gunakan event handler .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}6, .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}8 dan .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}7. Dalam contoh ini, kolom adalah target lepas selain dapat diseret. Bantu pengguna untuk memahami hal ini dengan membuat batas putus-putus saat mereka menahan item yang diseret di atas kolom. Misalnya, di CSS Anda, Anda dapat membuat kelas .box.over {
border: 3px dotted #666;
}1 untuk mewakili elemen yang merupakan target pelepasan
border: 3px dotted #666;
}
Kemudian, di JavaScript Anda atur event handler, tambahkan kelas .box.over {
border: 3px dotted #666;
}1 saat kolom diseret, dan hapus saat kita pergi. Di handler function handleDragStart(e) {
this.style.opacity = '0.4';
}
function handleDragEnd(e) {
this.style.opacity = '1';
}
let items = document.querySelectorAll('.container .box');
items.forEach(function (item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragend', handleDragEnd);
});_0 kami juga memastikan untuk menghapus kelas di akhir drag
function handleDragStart(e) {
this.style.opacity = '0.4';
}
function handleDragEnd(e) {
this.style.opacity = '1';
items.forEach(function (item) {
item.classList.remove('over');
});
}
function handleDragOver(e) {
e.preventDefault();
return false;
}
function handleDragEnter(e) {
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');
}
let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});
});
Ada beberapa poin yang perlu dibahas dalam kode ini
Acara untuk .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}_8 adalah menyetel properti .box.over {
border: 3px dotted #666;
}5 menjadi .box.over {
border: 3px dotted #666;
}6. Properti .box.over {
border: 3px dotted #666;
}_7 dibahas nanti dalam artikel ini. Untuk saat ini, ketahuilah bahwa ini mencegah peristiwa ________0______9 dipecat. Untuk mengesampingkan perilaku ini, panggil .box.over {
border: 3px dotted #666;
}9. Praktik baik lainnya adalah mengembalikan document.addEventListener('DOMContentLoaded', (event) => {
function handleDragStart(e) {
this.style.opacity = '0.4';
}
function handleDragEnd(e) {
this.style.opacity = '1';
items.forEach(function (item) {
item.classList.remove('over');
});
}
function handleDragOver(e) {
e.preventDefault();
return false;
}
function handleDragEnter(e) {
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');
}
let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});
});_0 di penangan yang samaPenangan kejadian .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}6 digunakan untuk mengaktifkan kelas .box.over {
border: 3px dotted #666;
}1 alih-alih .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}8. Jika Anda menggunakan .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}_8, kelas CSS akan dialihkan berkali-kali karena peristiwa .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}8 terus menyala pada kolom yang melayang. Pada akhirnya, itu akan menyebabkan perender browser melakukan banyak pekerjaan yang tidak perlu. Menjaga redraw seminimal mungkin selalu merupakan ide yang bagus. Jika Anda perlu menggunakan acara .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}_8 untuk sesuatu, pertimbangkan untuk melakukan throttling atau debouncing event listener Anda
Menyelesaikan penurunan
Untuk memproses penurunan yang sebenarnya, tambahkan pendengar acara untuk acara .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}9. Dalam penangan .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}_9, Anda harus mencegah perilaku default browser untuk penurunan, yang biasanya merupakan semacam pengalihan yang mengganggu. Anda dapat mencegah peristiwa menggelembungkan DOM dengan memanggil document.addEventListener('DOMContentLoaded', (event) => {
function handleDragStart(e) {
this.style.opacity = '0.4';
}
function handleDragEnd(e) {
this.style.opacity = '1';
items.forEach(function (item) {
item.classList.remove('over');
});
}
function handleDragOver(e) {
e.preventDefault();
return false;
}
function handleDragEnter(e) {
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');
}
let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});
});9
e.stopPropagation(); // stops the browser from redirecting.
return false;
}
Pastikan untuk mendaftarkan penangan baru di antara penangan lainnya
let items = document.querySelectorAll('.container .box');items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});
Jika Anda menjalankan kode saat ini, item tidak akan jatuh ke lokasi baru. Untuk mencapai ini, Anda perlu menggunakan objek function handleDrop(e) {
e.stopPropagation(); // stops the browser from redirecting.
return false;
}0
Properti function handleDrop(e) {
e.stopPropagation(); // stops the browser from redirecting.
return false;
}_1 adalah tempat semua keajaiban seret dan lepas terjadi. Itu menyimpan potongan data yang dikirim dalam aksi seret. function handleDrop(e) {
e.stopPropagation(); // stops the browser from redirecting.
return false;
}1 diatur dalam peristiwa .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}4 dan dibaca/ditangani dalam peristiwa jatuhkan. Memanggil function handleDrop(e) {
e.stopPropagation(); // stops the browser from redirecting.
return false;
}4 memungkinkan Anda menyetel muatan data dan jenis MIME objek
Dalam contoh ini, kami akan mengizinkan pengguna untuk mengatur ulang urutan kolom. Untuk melakukan itu, pertama-tama Anda harus menyimpan HTML elemen sumber saat drag dimulai
function handleDragStart(e) {this.style.opacity = '0.4';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
Dalam acara .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}_9 Anda memproses penurunan kolom, mengatur HTML kolom sumber ke HTML dari kolom target yang Anda jatuhkan, terlebih dahulu memeriksa bahwa pengguna tidak kembali ke kolom yang sama dengan yang mereka seret
e.stopPropagation();
if (dragSrcEl !== this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
Anda bisa melihat hasilnya pada demo berikut. Agar ini berfungsi, Anda memerlukan browser desktop. Drag and Drop API tidak didukung di perangkat seluler. Seret dan lepaskan kolom A di atas kolom B dan perhatikan bagaimana mereka berpindah tempat
Lebih banyak sifat menyeret
Objek function handleDrop(e) {
e.stopPropagation(); // stops the browser from redirecting.
return false;
}_1 memperlihatkan properti untuk memberikan umpan balik visual kepada pengguna selama proses seret. Properti ini juga dapat digunakan untuk mengontrol bagaimana setiap target jatuh merespons tipe data tertentu
- function handleDrop(e) {
e.stopPropagation(); // stops the browser from redirecting.
return false;
}7 membatasi 'jenis tarikan' yang dapat dilakukan pengguna pada elemen. Ini digunakan dalam model pemrosesan seret dan lepas untuk menginisialisasi .box.over {
border: 3px dotted #666;
}7 selama peristiwa .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}6 dan .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}8. Properti dapat diatur ke nilai berikut. let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});1, let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});2, let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});3, let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});4, let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});5, let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});6, let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});7, let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});8, dan let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});9 - .box.over {
border: 3px dotted #666;
}5 mengontrol umpan balik yang diberikan pengguna selama peristiwa .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}6 dan .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}8. Saat pengguna mengarahkan kursor ke elemen target, kursor browser menunjukkan jenis operasi apa yang akan dilakukan (mis. g. salinan, gerakan, dll. ). Efeknya dapat mengambil salah satu dari nilai berikut. let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});1, let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});2, let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});5, let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});7 - function handleDragStart(e) {
this.style.opacity = '0.4';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}_7 berarti bahwa alih-alih menggunakan umpan balik 'gambar hantu' default browser, Anda dapat menyetel ikon seret secara opsional
Unggah file dengan drag and drop
Contoh sederhana ini menggunakan kolom sebagai sumber seret dan target seret. Ini mungkin terlihat di UI tempat pengguna diminta untuk mengatur ulang item. Dalam beberapa situasi, target dan sumber seret mungkin berbeda, seperti antarmuka di mana pengguna harus memilih satu gambar untuk menjadi gambar utama produk dengan menyeret gambar yang dipilih ke target
Seret dan Jatuhkan sering digunakan untuk memungkinkan pengguna menyeret item dari desktop mereka ke dalam aplikasi. Perbedaan utama ada pada penangan .container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}_9 Anda. Alih-alih menggunakan function handleDragStart(e) {
this.style.opacity = '0.4';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}_9 untuk mengakses file, data mereka akan dimuat dalam properti function handleDrop(e) {
e.stopPropagation();
if (dragSrcEl !== this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}0