Komentar: Selalu apa yang ingin dilihat netizen apakah mereka tidak menggunakan JavaScript untuk mencapai efek drag and drop. Hari ini, HTML5 telah melakukan pengantar terperinci untuk Anda selanjutnya. Teman yang perlu diketahui bisa merujuknya.
Dalam pengembangan web, kita perlu menggunakan JavaScript untuk mencapai efek drag-and-drop. Hari ini mari kita terapkan menggunakan html5:
Mari kita lihat kode HTML inti terlebih dahulu:
<div>
<p> Seret kotak kuning kecil ke dalam kotak merah besar </p>
</div>
<div draggable = "true">
</div>
<div>
</div>
Properti yang dapat diseret baru ditambahkan oleh HTML5. Ini memiliki tiga nilai: benar, salah, otomatis. Benar diseret, salah tidak diperbolehkan. Otomatis tergantung pada apakah browser pengguna mendukungnya. Untuk informasi lebih lanjut, silakan merujuk ke dokumentasi resmi.
Tambahkan sedikit gaya:
<type style = "text/css">
#menjatuhkan
{
Lebar: 300px;
Tinggi: 200px;
Latar Belakang-Color: #FF0000;
padding: 5px;
Perbatasan: 2px Solid #000000;
}
#barang
{
Lebar: 100px;
Tinggi: 100px;
Latar Belakang-Color: #FFFF00;
padding: 5px;
margin: 20px;
Perbatasan: 1px berlari #000000;
}
*[draggable = true] {
-Moz-pengguna-select: tidak ada;
-khtml-user-drag: elemen;
Kursor: Pindah;
}
*:-khtml-drag {
Latar Belakang: RGBA (238.238.238, 0,5);
}
</tyle>
Lalu mari kita lihat JavaScript:
Fungsi listenEvent (EventTarget, EventType, EventHandler) {
if (eventTarget.addeventListener) {
EventTarget.AddeventListener (EventType, EventHandler, FALSE);
} else if (eventTarget.attachevent) {
EventType = "on" + EventType;
EventTarget.AttachEvent (EventType, EventHandler);
} kalau tidak {
EventTarget ["ON" + EventType] = EventHandler;
}
}
// Batalkan acara
fungsi cancelEvent (event) {
if (event.preventdefault) {
event.preventdefault ();
} kalau tidak {
event.returnValue = false;
}
}
// Batalkan propagasi
fungsi cancelpropagation (event) {
if (event.stoppropagation) {
event.stoppropagation ();
} kalau tidak {
event.cancelbubble = true;
}
}
window.onload = function () {
var target = document.getElementById ("drop");
ListenEvent (Target, "Dragenter", CancelEvent);
ListenEvent (Target, "Dragover", Dragover);
ListenEvent (target, "drop", function (evt) {
Batalpropagation (EVT);
EVT = EVT || window.event;
evt.datatransfer.dropeffect = 'copy';
var id = evt.dataTransfer.getData ("teks");
target.appendChild (document.getElementById (id));
});
var item = document.getElementById ("item");
item.setAttribute ("draggable", "true");
ListenEvent (item, "dragstart", function (evt) {
EVT = EVT || window.event;
evt.datatransfer.effectallowed = 'copy';
evt.dataTransfer.setData ("text", item.id);
});
};
function dragover (evt) {
if (evt.preventdefault) evt.preventdefault ();
EVT = EVT || window.event;
evt.datatransfer.dropeffect = 'copy';
mengembalikan false;
}
Dari kode di atas, kami melihat acara drag and drop yang disediakan dengan menggunakan satu set HTML5, dan melihat langsung sebagai berikut:
dragstart
Acara seret dimulai.
menyeret
Selama operasi seret.
Dragenter
Seret sudah melampaui target; Digunakan untuk menentukan apakah target akan menerima penurunan.
Dragover
Seret sudah berlebihan; digunakan untuk menentukan umpan balik kepada pengguna.
menjatuhkan
Drop terjadi.
Dragleave
Target seret daun.
Dragend
Operasi seret berakhir.
Tentukan acara terkait untuk mengimplementasikan fungsi yang diinginkan. JS di atas tidak sulit dimengerti.
Anda dapat mencobanya sendiri. Saat ini, mendukung yang terbaik di opera, tetapi efek IE tidak baik.
Semoga ini akan membantu pengembangan web Anda.