HTML5 Drag and Drop
Drag and Drop
Drag dan drop adalah fitur yang sangat umum. Ini adalah ketika Anda "ambil" objek dan tarik ke lokasi yang berbeda.
Dalam HTML5, drag dan drop merupakan bagian dari standar, dan setiap elemen dapat diseret.
Browser Support
Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh Drag dan Drop.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML Drag and Drop Example
Contoh di bawah ini adalah drag dan drop sederhana contoh:
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Ini mungkin tampak rumit, tetapi mari kita pergi melalui semua bagian yang berbeda dari drag dan drop acara.
Make an Element Draggable
Pertama-tama: Untuk membuat elemen draggable, mengatur atribut draggable ke benar:
<img draggable="true">
What to Drag - ondragstart and setData()
Kemudian, tentukan apa yang harus terjadi ketika elemen diseret.
Dalam contoh di atas, atribut ondragstart memanggil fungsi, drag (event), yang menentukan data apa yang akan diseret.
The dataTransfer.setData () metode menetapkan tipe data dan nilai data diseret:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
ev.dataTransfer.setData("text", ev.target.id);
}
Dalam hal ini, jenis data "text" dan nilai adalah id dari elemen diseret ("drag1").
Where to Drop - ondragover
Acara ondragover menentukan di mana data menyeret dapat dijatuhkan.
Secara default, data / elemen tidak dapat dijatuhkan dalam elemen lainnya. Untuk memungkinkan penurunan, kita harus mencegah penanganan default elemen.
Hal ini dilakukan dengan memanggil event.preventDefault () metode untuk acara ondragover:
event.preventDefault()
Do the Drop - ondrop
Ketika data menyeret dijatuhkan, acara penurunan terjadi.
Dalam contoh di atas, atribut ondrop memanggil fungsi, drop (event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Kode menjelaskan:
1. Panggil preventDefault () untuk mencegah penanganan browser default data (default adalah terbuka seperti link di drop)
2. Mendapatkan data diseret dengan metode dataTransfer.getData (). Metode ini akan mengembalikan data yang ditetapkan untuk jenis yang sama di setData () metode
3. Data yang diseret adalah id dari elemen diseret ("drag1")
4. Menambahkan elemen diseret ke elemen penurunan
