HTML5 Drag dan Drop

Sebelumnya: HTML5 inline SVG

Berikutnya: HTML5 geopositioning

Drag dan drop (drag and drop) merupakan bagian dari standar HTML5.

W3cschool ikon dan tarik ke persegi panjang.

Drag dan Drop

Drag dan drop adalah fitur umum, yang merangkak ke lokasi lain setelah objek.

Dalam HTML5, drag dan drop adalah bagian standar dari setiap elemen dapat drag dan drop.

Dukungan Browser

Internet Explorer 9 +, Firefox, Opera, Chrome, dan Safari dukungan drag.

Catatan: Safari 5.1.2 tidak mendukung drag.

HTML5 Drag dan Contoh drop

Contoh berikut adalah sederhana drag dan drop Contoh:

contoh

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>

<p>拖动 W3CSchool.cc 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Coba »

Ini mungkin tampak sedikit rumit, tapi kami mampu untuk mempelajari bagian-bagian yang berbeda dari drag dan drop peristiwa.

Elemen diatur untuk menjatuhkan

Pertama, dalam rangka untuk membuat elemen draggable, mengatur atribut draggable untuk benar:

Tarik Apa - ondragstart dan setData ()

Kemudian, ketika elemen diseret penyediaan, apa yang akan terjadi.

Dalam contoh di atas, atribut ondragstart panggilan fungsi, drag (event), yang mendefinisikan data diseret.

dataTransfer.setData () metode untuk mengatur jenis data dan nilai ditarik Data:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

Dalam contoh ini, jenis data "Text", nilai adalah draggable elemen id ( "drag1").

Di mana untuk menempatkan - ondragover

ondragover acara tertentu di mana untuk menempatkan data diseret.

Secara default, Anda tidak dapat menempatkan data / elemen ke elemen lainnya. Jika Anda perlu menyiapkan memungkinkan Anda untuk menempatkan, kita harus mencegah penanganan default dari elemen.

Lakukan ini dengan memanggil ondragover acara event.preventDefault () metode:

event.preventDefault()

Ditempatkan - ondrop

Ketika ditempatkan Data diseret, drop peristiwa 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 penjelasan:

Memanggil preventDefault () untuk mencegah default browser untuk pengolahan data (perilaku default penurunan acara adalah untuk membuka link)
Mendapatkan data diseret melalui dataTransfer.getData ( "Text") metode. Metode ini akan mengembalikan sama kumpulan data dari jenis apa pun dalam metode setData ().
Data yang digandeng diderek elemen id ( "drag1")
elemen menyeret ditambahkan ke tempat elemen (target elemen) di

contoh yang lebih

Drag dan drop gambar bolak-balik
Bagaimana untuk drag dan drop gambar antara dua <div> elemen.