ondrag olayı
Tanım ve Kullanım
ondrag olayı, bir öğe veya metin seçimi sürüklendiğinde meydana gelir.
Sürükleme-yerleştirme, HTML5'te çok yaygın bir özelliktir. Bu, bir nesneyi "çek" ve farklı bir konuma sürüklediğiniz zaman olur. Daha fazla bilgi edinmek için, bizim hakkında HTML5 TaşımaHTML eğitim sayfamızı kullanın.
Notlar:Bir öğeyi sürüklenebilir hale getirmek için, genel HTML5 draggable özelliği。
İpucu:Varsayılan olarak, bağlantılar ve görseller sürüklenebilir, draggable özelliği gerekmez.
Sürükleme-yerleştirme işlemi的不同阶段，有许多事件被使用，并且可能发生：
Draggable hedef (kaynak öğe) üzerinde tetiklenen olaylar:
- ondragstart - Kullanıcı öğeyi sürüklemeye başladığında meydana gelir
- ondrag - Öğe sürüklendiğinde meydana gelir
- ondragend - Kullanıcı sürükleme işlemini tamamladığında meydana gelir
Konum hedefinde tetiklenen olaylar:
- ondragenter - Sürüklenen öğe konum hedefine girdiğinde meydana gelir
- ondragover - Sürüklenen öğe konum hedefinde meydana gelir
- ondragleave - Sürüklenen öğe konum hedefinden ayrıldığında meydana gelir
- ondrop - Sürüklenen öğe konum hedefine konduğunda meydana gelir
Notlar:Draggable öğe sürüklenirken, ondrag olayı her 350 milisaniyede bir tetiklenir.
Örnek
Draggable <p> öğesi sürüklendiğinde JavaScript çalıştırılır:
<p draggable="true" ondrag="myFunction(event)">Bana sürükle!</p>
Sayfa altında daha fazla TIY örneği bulunmaktadır.
Sözdizimi
HTML'de:
<element ondrag="myScript">
JavaScript'te:
nesne.ondrag = function(){myScript};
JavaScript'te, addEventListener() yöntemini kullanarak:
nesne.addEventListener("drag", myScript);
Notlar:Internet Explorer 8 veya daha eski sürümler desteklenmiyor addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondrag | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
更多实例
对所有可能的拖放事件的演示：
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData()方法设置被拖拽数据的数据类型和值
event.dataTransfer.setData("Text", event.target.id);
// 开始拖动 p 元素时输出一些文本
document.getElementById("demo").innerHTML = \"Started to drag the p element.\";
// 更改可拖动元素的不透明度
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 = \"Finished dragging the p element.\";
event.target.style.opacity = "1";
});
/* ----------------- Yerleştirme hedefinde tetiklenen olaylar ----------------- */
// Taşınabilir p elementi droptarget'a girdiğinde, DIV'in kenar çizgisi tarzını değiştirin
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Varsayılan olarak, veri/elementin diğer elementlere yerleştirilmesi mümkün değildir. Yerleştirmeyi izinlendirmek için elementin varsayılan işlemini engellememiz gerekiyor
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Taşınabilir p elementi droptarget'tan ayrıldığında, DIV'in kenar çizgisi tarzını sıfırlayın
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Yerleştirme sırasında - Tarayıcının veri için varsayılan işlemini önleyin (varsayılan olarak bağlantı olarak açılır)
Çıktı metninin rengini ve DIV'in kenar çizgisi rengini sıfırlayın
dataTransfer.getData() yöntemi ile taşınabilir veriyi alın
Taşınabilir veri, taşınabilir elementin id'sidir ("drag1")
Taşınabilir elementi yerleştirme elementine ekleyin
*/
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>
