ondragover Olayı
Örnek
Bir öğe bir bırakma hedefinin üzerine sürüklenirken bir JavaScript yürütün:
<div ondragover="myFunction(event)"></div>
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Ondgover olayı, sürüklenebilir bir öğe veya metin seçimi geçerli bir bırakma hedefi üzerine sürüklenirken meydana gelir.
Varsayılan olarak, veriler/öğeler diğer öğelere bırakılamaz. Bir düşüşe izin vermek için, öğenin varsayılan olarak işlenmesini engellemeliyiz. Bu, ondragover olayı için event.preventDefault() yöntemi çağrılarak yapılır.
Sürükle ve bırak, HTML5'te çok yaygın bir özelliktir. Bir nesneyi "yakaladığınız" ve onu farklı bir konuma sürüklediğiniz zamandır. Daha fazla bilgi için HTML5 Sürükle ve Bırak ile ilgili HTML Eğitimimize bakın .
Not: Bir öğeyi sürüklenebilir yapmak için global HTML5 sürüklenebilir özniteliğini kullanın.
İpucu: Bağlantılar ve resimler varsayılan olarak sürüklenebilirdir ve sürüklenebilir özniteliğe ihtiyaç duymazlar.
Sürükle ve bırak işleminin farklı aşamalarında kullanılan ve meydana gelebilecek birçok olay vardır:
- Sürüklenebilir hedefe (kaynak öğe) ateşlenen olaylar :
- ondragstart - kullanıcı bir öğeyi sürüklemeye başladığında gerçekleşir
- ondrag - bir öğe sürüklenirken oluşur
- ondragend - kullanıcı öğeyi sürüklemeyi bitirdiğinde oluşur
- Düşme hedefinde tetiklenen olaylar:
- ondragenter - sürüklenen öğe bırakma hedefine girdiğinde oluşur
- ondgover - sürüklenen öğe bırakma hedefinin üzerindeyken oluşur
- ondragleave - sürüklenen öğe bırakma hedefinden ayrıldığında oluşur
- ondrop - sürüklenen öğe bırakma hedefine bırakıldığında oluşur
Not: Bir öğeyi sürüklerken, ondragover olayı her 350 milisaniyede bir tetiklenir.
Tarayıcı Desteği
Tablodaki sayılar, olayı tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Event | |||||
---|---|---|---|---|---|
ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Sözdizimi
HTML'de:
<element ondragover="myScript">
JavaScript'te:
object.ondragover = function(){myScript};
JavaScript'te, addEventListener() yöntemini kullanarak:
object.addEventListener("dragover", myScript);
Not: addEventListener () yöntemi, Internet Explorer 8 ve önceki sürümlerde desteklenmez.
Teknik detaylar
kabarcıklar: | Evet |
---|---|
İptal edilebilir: | Evet |
Etkinlik tipi: | DragEvent |
Desteklenen HTML etiketleri: | Tüm HTML öğeleri |
DOM Sürümü: | 3. Seviye Etkinlikleri |
Daha fazla örnek
Örnek
TÜM olası sürükle ve bırak olaylarının bir gösterimi:
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
// Events fired on the drag target
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// Change the opacity of the draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
// Events fired on the drop target
// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
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>
İlgili Sayfalar
HTML Eğitimi: HTML5 Sürükle ve Bırak
HTML Referansı: HTML sürüklenebilir Özellik