Drag dan drop adalah bagian dari standar HTML5.
Drag gambar di atas ke persegi panjang.
di HTML
HTML5 bekerja spesifikasi draft termasuk dukungan untuk drag & drop. HTML5 mendukung berbagai jenis menyeret dan menjatuhkan fitur termasuk:
- Drag dan Drop teks dan kode HTML
- Drag dan Drop elemen HTML
- Drag dan file Jatuhkan
Berdasarkan tindakan yang diperlukan, salah satu jenis di atas dapat digunakan. Perhatikan bahwa ketika sebuah elemen HTML diseret untuk memindahkan posisi saat ini, ID-nya dikirim ke elemen induk tujuan; sehingga mengirimkan teks dan dapat dianggap sebagai kelompok pertama.
aplikasi e-mail berbasis web Google Gmail mendukung drag-and-drop gambar dan lampiran di browser Google Chrome terbaru dan Apple Safari (5.x). Dan pencarian Google Image mendukung drag & drop.
Drag dan Drop
Drag dan drop adalah fitur yang sangat umum. Ini adalah ketika Anda "grab" sebuah objek dan tarik ke lokasi yang berbeda.
Dalam HTML5, drag dan drop merupakan bagian dari standar, dan setiap elemen dapat diseret.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung Drag dan Drop.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3,5 | 6.0 | 12.0 |
Drag HTML dan Drop Contoh
Contoh di bawah adalah sederhana drag dan drop contoh:
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> Cobalah sendiri " Ini mungkin tampak rumit, tetapi mari kita pergi melalui semua bagian yang berbeda dari drag dan drop acara.
Membuat Elemen Draggable
Pertama-tama: Untuk membuat elemen draggable, mengatur draggable atribut untuk true :
<img draggable="true">
Apa yang harus Tarik - ondragstart dan setData()
Kemudian, tentukan apa yang harus terjadi ketika elemen diseret.
Dalam contoh di atas, ondragstart atribut panggilan fungsi, drag(event) , yang menentukan data apa yang akan diseret.
The dataTransfer. setData() dataTransfer. setData() metode menetapkan jenis data dan nilai data diseret:
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
Dalam hal ini, jenis data "text" dan nilai adalah id dari elemen diseret ("drag1") .
Dimana untuk Drop - ondragover
The ondragover acara menentukan di mana data menyeret dapat dijatuhkan.
Secara default, data / elemen tidak dapat dijatuhkan dalam elemen lainnya. Untuk memungkinkan drop, kita harus mencegah penanganan default elemen.
Hal ini dilakukan dengan memanggil event. preventDefault() event. preventDefault() metode untuk ondragover acara:
event . preventDefault()
Apakah Drop - ondrop
Ketika data menyeret dijatuhkan, acara penurunan terjadi.
Dalam contoh di atas, ondrop atribut panggilan fungsi, drop(event) :
function drop(ev) {
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
Kode menjelaskan:
- Sebut preventDefault() untuk mencegah penanganan default browser dari data (default is open as link on drop)
- Mendapatkan data diseret dengan dataTransfer. getData() dataTransfer. getData() metode. Metode ini akan mengembalikan data yang ditetapkan untuk jenis yang sama di setData() metode
- Data diseret adalah id dari elemen diseret ("drag1")
- Menambahkan elemen diseret ke drop elemen
Drag gambar bolak-balik
Cara tarik (and drop) gambar bolak-balik antara dua <div> elemen.