acara ondrop


ondrop acara

instance

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.droptarget {
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<p>在两个矩形框中来回拖动 p 元素:</p>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
	<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">拖动我!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>
<p id="demo"></p>
<script>
function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
    document.getElementById("demo").innerHTML = "开始拖动 p 元素";
}
function allowDrop(event) {
    event.preventDefault();
}
function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
    document.getElementById("demo").innerHTML = " p 元素已被拖动";
}
</script>

</body>
</html>

run instance»

klik Butang "Jalankan Instance" untuk melihat contoh dalam talian

Lebih banyak contoh disertakan di bahagian bawah artikel ini.

Definisi dan Penggunaan

Acara ondrop dicetuskan apabila elemen boleh seret atau teks yang dipilih diletakkan di kawasan sasaran.

Seret dan lepas ialah ciri yang sangat biasa dalam HTML5. Maklumat lanjut boleh didapati dalam HTML kami Seret dan lepas HTML5 dalam tutorial.

Nota: Untuk menjadikan elemen boleh diseret, anda perlu menggunakan atribut HTML5draggable.

Petua: Pautan dan imej boleh diseret secara lalai dan tidak memerlukan atribut boleh diseret.

Peristiwa berikut akan dicetuskan semasa proses seret dan lepas:

  • Acara akan dicetuskan pada sasaran seret (elemen sumber) :
    • ondragstart - Menyala apabila pengguna mula menyeret elemen
    • ondrag - Menyala apabila elemen sedang diseret
    • ondragend - Menyala apabila pengguna selesai menyeret elemen

  • Peristiwa yang dicetuskan apabila sasaran dilepaskan:
    • ondragenter - Peristiwa ini dicetuskan apabila objek yang diseret oleh tetikus memasukinya skop kontena
    • ondragover - Peristiwa ini dicetuskan apabila objek yang diseret diseret dalam julat bekas objek lain
    • ondragleave - Peristiwa ini dicetuskan apabila objek yang diseret oleh tetikus meninggalkan bekasnya julat
    • ondrop - Acara ini dicetuskan apabila butang tetikus dilepaskan semasa proses menyeret

Sokongan penyemak imbas

Nota: Apabila menyeret elemen, acara ondragover akan dicetuskan setiap 350 milisaat.

Acara
事件




ondrop4.09.03.56.012.0
 <🎜><🎜><🎜><🎜>
ondrop4.09.03.56.0 12.0

Sintaks

HTML:

<elemen ondrop="myScript"> ia

JavaScript:

objek.ondrop=function(){myScript}; 🎜>
Dalam JavaScript, gunakan kaedah addEventListener():

objek
.addEventListener("drop", myScript); 🎜>
Nota:
Internet Explorer 8 dan versi IE terdahulu tidak menyokong kaedah addEventListener().

Butiran teknikal

是否支持冒泡:Yes
是否可以取消:Yes
事件类型:DragEvent
支持的 HTML 标签:All HTML elements

Lagi contoh

Contoh

rreee

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian


Halaman Berkaitan
Tutorial HTML: Seret dan Lepas HTML5

Manual Rujukan HTML: Atribut boleh seret HTML

←
→