Seret dan lepas HTML5
Seret dan lepas ialah ciri biasa di mana objek ditangkap dan kemudian diseret ke lokasi lain.
Dalam HTML5, seret dan lepas adalah sebahagian daripada standard dan mana-mana elemen boleh diseret dan digugurkan.
Seret dan lepas adalah sebahagian daripada standard HTML5.
Sokongan penyemak imbas
Internet Explorer 9+, Firefox, Opera, Chrome dan Safari menyokong penyeretan.
Nota: Safari 5.1.2 tidak menyokong penyeretan.
Contoh seret dan lepas HTML5
di bawah Contohnya ialah contoh seret dan lepas yang mudah:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
#div1 {width:300px;height:200px;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="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" width="300" height="200">
</body>
</html>Jalankan atur cara dan cuba seret imej
Atur cara mungkin kelihatan agak rumit, tetapi kita boleh mengkaji bahagian yang berbeza acara seret dan lepas secara berasingan.
Tetapkan elemen sebagai boleh seret
Pertama, untuk menjadikan elemen boleh seret, tetapkan atribut boleh seret kepada benar:
<img draggable="true">
Apa yang hendak diseret - ondragstart dan setData()
Kemudian, nyatakan perkara yang berlaku apabila elemen itu diseret.
Dalam contoh di atas, atribut ondragstart memanggil fungsi, drag(event), yang menentukan data untuk diseret.
kaedah dataTransfer.setData() menetapkan jenis data dan nilai data yang diseret:
function drag(ev)
{
ev.dataTransfer . setData("Teks",ev.target.id);
}
Dalam contoh ini, jenis data ialah "Teks" dan nilainya ialah id yang boleh diseret elemen ( "seret1").
Di mana hendak diletakkan - ondragover
acara ondragover Menentukan di mana untuk meletakkan data yang diseret.
Secara lalai, data/elemen tidak boleh diletakkan di dalam elemen lain. Jika kita perlu membenarkan peletakan, kita mesti menghalang pengendalian lalai bagi elemen tersebut.
Ini dilakukan dengan memanggil kaedah event.preventDefault() acara ondragover:
event.preventDefault()
untuk penempatan - ondrop
Apabila data yang diseret diletakkan, peristiwa jatuh akan berlaku.
Dalam contoh di atas, atribut ondrop memanggil fungsi, drop(event):
function drop(ev)
{
ev ();
var data=ev.dataTransfer.getData("Teks");
ev.target.appendChild(document.getElementById(data));
}
Penjelasan kod:
Panggil preventDefault() untuk mengelakkan pemprosesan lalai data penyemak imbas (tingkah laku lalai acara drop ialah membukanya sebagai pautan)
Dapatkan data yang diseret melalui kaedah dataTransfer.getData("Teks"). Kaedah ini akan mengembalikan sebarang set data kepada jenis yang sama dalam kaedah setData().
Data yang diseret ialah id elemen yang diseret ("drag1")
Tambahkan elemen yang diseret pada elemen peletakan (elemen sasaran ) Cara menyeret antara dua elemen <div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
#div1, #div2
{float:left; width:200px; height:205px; margin:10px;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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="190" height="190"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>Jalankan program dan cuba
