Seret dan lepas HTML5


Seret dan lepas adalah sebahagian daripada standard HTML5.

b27335353b2ead8855b5fb5e8de63b4.png

Seret ikon tapak web Cina php ke dalam kotak segi empat tepat.

Seret dan Lepaskan

Seret dan lepas ialah ciri biasa di mana anda mengambil objek dan menyeretnya ke lokasi lain kemudian.

Dalam HTML5, seret dan lepas adalah sebahagian daripada standard dan mana-mana elemen boleh diseret dan digugurkan.

Sokongan Penyemak Imbas

e788739015d6484a44f564f64791f9e.png

Seretan sokongan Internet Explorer 9+, Firefox, Opera, Chrome dan Safari.

Nota: Safari 5.1.2 tidak menyokong penyeretan.

Contoh seret dan lepas HTML5

Contoh berikut ialah seretan mudah Contoh tempat:

Instance

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>拖动 php中文网 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://img.php.cn/upload/course/000/000/010/58043146a1da1979.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Jalankan instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Ia mungkin kelihatan agak rumit, tetapi kita boleh mengkaji bahagian berlainan 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, tetapkan bahawa apabila elemen itu diseret, apa yang berlaku.

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:

fungsi seret(ev)
{
ev.dataTransfer.setData("Teks",ev.target.id);
}

Dalam contoh ini, jenis data ialah "Teks" dan nilainya ialah id elemen boleh seret ("drag1").

Di mana hendak diletakkan - ondragover

Acara ondragover menentukan tempat 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()

Tempat - ondrop

Apabila data yang diseret diletakkan, acara drop akan berlaku.

Dalam contoh di atas, atribut ondrop memanggil fungsi, drop(event):

penjelasan kod 
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
:

  • Panggil preventDefault() untuk mengelakkan pemprosesan lalai data penyemak imbas (tingkah laku lalai acara drop adalah untuk dibuka sebagai pautan)

  • Melalui Pemindahan data kaedah .getData ("Teks") untuk mendapatkan data yang diseret. 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 )

Lagi contoh

Seret dan lepaskan imej ke depan dan belakang
Cara untuk menyeret dan melepaskan imej antara dua <div> elemen.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; 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="https://img.php.cn/upload/course/000/000/010/58049330dcf69494.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian