peristiwa ondragen
ondragend acara
instance
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)" ondragend="dragEnd(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 dragEnd(event) {
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));
}
</script>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Maklumat lanjut disertakan di bahagian bawah artikel ini Berbilang contoh.
Definisi dan Penggunaan
Peristiwa ondragen dicetuskan apabila pengguna selesai menyeret elemen atau teks pilihan.
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 - Peristiwa ini dicetuskan apabila butang tetikus dilepaskan semasa seret
Pelayar menyokong
dalam jadual Nombor tersebut mewakili nombor versi penyemak imbas pertama yang menyokong acara ini.
| Acara |
| <🎜> | <🎜> | <🎜> | <🎜> | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ondragend | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Sintaks
HTML:
<elemen ondragend="myScript"> ia
JavaScript:
objek.ondragend=function(){myScript}; 🎜>
Dalam JavaScript, gunakan kaedah addEventListener():objek
Internet Explorer 8 dan versi IE terdahulu tidak menyokong kaedah addEventListener(). .addEventListener("dragend", myScript); 🎜>
Nota: Butiran teknikal
| 是否支持冒泡: | Yes |
|---|---|
| 是否可以取消: | No |
| 事件类型: | DragEvent |
| 支持的 HTML 标签: | All HTML elements |
Lagi contoh
Contoh
<!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">
<p draggable="true" id="dragtarget">拖动我!</p>
</div>
<div class="droptarget"></div>
<p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>
<p id="demo"></p>
<script>
/* 拖动时触发*/
document.addEventListener("dragstart", function(event) {
//dataTransfer.setData()方法设置数据类型和拖动的数据
event.dataTransfer.setData("Text", event.target.id);
// 拖动 p 元素时输出一些文本
document.getElementById("demo").innerHTML = "开始拖动 p 元素.";
//修改拖动元素的透明度
event.target.style.opacity = "0.4";
});
//在拖动p元素的同时,改变输出文本的颜色
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// 当拖完p元素输出一些文本元素和重置透明度
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "完成 p 元素的拖动";
event.target.style.opacity = "1";
});
/* 拖动完成后触发 */
// 当p元素完成拖动进入droptarget,改变div的边框样式
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// 当可拖放的p元素离开droptarget，重置div的边框样式
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
复位输出文本的颜色和DIV的边框颜色
利用dataTransfer.getData()方法获得拖放数据
拖拖的数据元素id(“drag1”)
拖拽元素附加到drop元素*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat instance dalam talian
Halaman Berkaitan
Tutorial HTML: Seret dan Lepas HTML5Manual Rujukan HTML: Atribut boleh seret HTML
