Drag dan Drop
Drag dan drop adalah fitur yang sangat umum. Ini adalah ketika Anda "ambil" obyek dan tarik ke lokasi yang berbeda.
Dalam HTML5, drag dan drop merupakan bagian dari standar, dan setiap elemen bisa draggable.
Browser Dukungan
Internet Explorer 9, Firefox, Chrome, dan Safari 5 dukungan drag dan drop.
Catatan: Drag dan drop tidak bekerja di Safari 5.1.2.
HTML5 Drag dan Drop Contoh
Contoh di bawah adalah drag dan drop sederhana misalnya:
Contoh
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</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 type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</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>
Mungkin terlihat rumit, tapi mari kita pergi melalui semua bagian yang berbeda dari acara drag dan drop.
Membuat draggable Elemen
Pertama-tama: Untuk membuat draggable elemen, mengatur atribut draggable untuk benar:
<img draggable="true" />
Apa yang harus Drag - ondragstart dan setData ()
Kemudian, tentukan apa yang harus terjadi ketika elemen diseret.
Dalam contoh di atas, atribut ondragstart panggilan fungsi, drag (event), yang menentukan data apa yang akan diseret.
Para 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 "Teks" dan nilai adalah id dari elemen draggable ("drag1").
Dimana Drop - ondragover
Acara ondragover menentukan dimana data diseret dapat dijatuhkan.
Secara default, data / unsur yang tidak dapat dijatuhkan dalam unsur lainnya. Untuk memungkinkan setetes, kita harus mencegah penanganan default dari elemen.
Hal ini dilakukan dengan memanggil event.preventDefault () metode untuk acara ondragover:
event.preventDefault()
Apakah Drop - ondrop
Ketika data menyeret terjatuh, peristiwa penurunan terjadi.
Dalam contoh di atas, atribut ondrop panggilan fungsi, drop (event):
function drop(ev)
{
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));
ev.preventDefault();
}
Kode menjelaskan:
- Dapatkan data diseret dengan metode ("Teks") dataTransfer.getData. Metode ini akan mengembalikan setiap data yang ditetapkan untuk jenis yang sama dalam setData () metode
- Data yang diseret adalah id dari elemen diseret ("drag1")
- Tambahkan elemen diseret ke elemen penurunan
- Call preventDefault () untuk mencegah penanganan default browser dari data
(default terbuka sebagai link pada drop)
No comments:
Post a Comment