acara ondragover


ondragover Acara

Instance

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

<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">把我拖动到矩形框中！</p>
<div id="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);
}
function allowDrop(event) {
    event.preventDefault();
    document.getElementById("demo").innerHTML = " p 元素在放置目标上";
    event.target.style.border = "4px dotted green";
}
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 ondragover dicetuskan apabila elemen boleh seret atau teks yang dipilih sedang diseret ke sasaran jatuh.

Secara lalai, data/elemen tidak boleh diletakkan di dalam elemen lain. Jika kita ingin melaksanakan fungsi perubahan, kita perlu mengelakkan kaedah pemprosesan lalai bagi elemen tersebut. Kita boleh melakukan ini dengan menelefon kaedah event.preventDefault() untuk melaksanakan acara ondragover.

Seret dan lepas ialah ciri yang sangat biasa dalam HTML5. Untuk maklumat lanjut lihat 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 - Peristiwa ini dicetuskan apabila butang tetikus dilepaskan semasa proses menyeret

Nota: Setiap Peristiwa ondragover dicetuskan setiap 350 milisaat.

Sokongan Penyemak Imbas

Nombor dalam jadual menunjukkan nombor versi penyemak imbas pertama yang menyokong acara tersebut.

Acara
事件




ondragover4.09.03.56.012.0
 <🎜><🎜><🎜><🎜>
ondragover4.09.03.56.0 12.0

Sintaks

HTML:

<elemen ondragover="myScript"> ia

JavaScript:

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

objek
.addEventListener("dragover", 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

←
→