ondragend olayı
Tanım ve Kullanım
Kullanıcı, ögeyi veya metin seçimini sürüklediğinde, ondragend olayı gerçekleşir.
HTML5'te çok yaygın bir işlevsellik, bir nesneyi "kap" ve farklı bir konuma sürüklemektir. Daha fazla bilgi edinmek için, bizim hakkında HTML5 TaşımaHTML eğitimini kullanın.
Açıklama:Ögeyi 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ükle ve bırak işlemi sırasında farklı aşamalarda birçok olay kullanılır ve gerçekleşebilir:
Sürüklenebilir hedef (kaynak ögesi) üzerinde tetiklenen olaylar:
- ondragstart - Kullanıcı, ögeyi sürüklemeye başladığında gerçekleşir
- ondrag - Öge sürüklendiğinde gerçekleşir
- ondragend - Kullanıcı, sürüklenen ögeyi tamamladığında gerçekleşir
Konum hedefinde tetiklenen olaylar:
- ondragenter - Sürüklenebilen öge, konum hedefine girdiğinde gerçekleşir
- ondragover - Sürüklenebilen öge, konum hedefindeyken gerçekleşir
- ondragleave - Sürüklenebilen öge, konum hedefinden ayrıldığında gerçekleşir
- ondrop - Sürüklenebilen öge, konum hedefine konduğunda gerçekleşir
Örnek
Kullanıcı <p> ögesini sürüklediğinde JavaScript çalıştırılır:
<p draggable="true" ondragend="myFunction(event)">Bana sürükle!</p>
Sayfa altında daha fazla TIY örneği bulunmaktadır.
Sözdizimi
HTML'de:
<element ondragend="myScript">
JavaScript'te:
nesne.ondragend = function(){myScript};
JavaScript'te, addEventListener() yöntemini kullanarak:
nesne.addEventListener("dragend", myScript);
Açıklama:Internet Explorer 8 veya daha eski sürümler desteklememektedir addEventListener() yöntemi。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 不支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragend | 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 kenarlık tarzını değiştirin
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Öntanımlı olarak, veri/elementin diğer elementlere yerleştirilmesi mümkün değildir. Yerleştirmeyi mümkün kılmak için elementin varsayılan işleme karşı önlem alın
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Taşınabilir p elementi droptarget'tan ayrıldığında, DIV'in kenarlık 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 - Browsers'un veri için varsayılan işleme karşı önlem alın (varsayılan olarak bağlantı olarak açılır)
Çıktı metninin rengini ve DIV'in kenarlık rengini sıfırlayın
dataTransfer.getData() yöntemi ile taşıyan veriyi alın
Taşınan veri, taşınan elementin id'sidir ("drag1")
Taşınan 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>
