ondragover olayı

Tanım ve Kullanım

Sürüklenebilir bir element veya metin seçimi geçerli bir yerleştirme hedefine sürüklendiğinde ondragover olayı meydana gelir.

Varsayılan olarak, veri/elementin diğer elementlerde silinemeyeceği. Yerleştirme için izin vermek için, elementin varsayılan işleme engellemek zorundayız. Bu, ondragover olayının event.preventDefault() yöntemi aracılığıyla yapılır.

Tasınma ve bırakma, HTML5'te çok yaygın bir özelliktir. Bir nesneyi "çekip" farklı bir konuma sürüklediğiniz zaman gerçekleşir. Daha fazla bilgi öğrenmek için, bizim HTML5 sürükle ve bırakHTML eğitimini kullanın.

Açıklama:Bir elementi 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 ve draggable özelliği gerekmez.

Tasınma ve bırakma işlemi boyunca farklı aşamalarda birçok olay kullanılır ve meydana gelebilir:

Tasınabilir hedef (kaynak element) üzerinde tetiklenen olaylar:

ondragstart - Kullanıcı elementi sürüklemeye başladığında gerçekleşir
ondrag - Element sürüklendiğinde gerçekleşir
ondragend - Kullanıcı sürükleme elementini tamamladığında gerçekleşir

Yerleştirme hedefinde tetiklenen olaylar:

ondragenter - Sürüklenen element yerleştirme hedefine girdiğinde gerçekleşir
ondragover - Sürüklenen element yerleştirme hedefindeyken gerçekleşir
ondragleave - Sürüklenen element yerleştirme hedefinden ayrıldığında gerçekleşir
ondrop - Sürüklenen element yerleştirme hedefine konduğunda gerçekleşir

Açıklama:Element sürüklendiğinde, ondragover olayı her 350 milisaniyede bir tetiklenir.

Örnek

Bir element sürüklendiğinde, yerleştirme hedefine sürüklenirken JavaScript çalıştırılır:

<div ondragover="myFunction(event)"></div>

Kişisel olarak deneyin

Sayfa altında daha fazla TIY örneği bulunmaktadır.

Sözdizimi

HTML'de:

<element ondragover="myScript">

Kişisel olarak deneyin

JavaScript'te:

nesne.ondragover = function(){myScript};

Kişisel olarak deneyin

JavaScript'te, addEventListener() yöntemini kullanarak:

nesne.addEventListener("dragover", myScript);

Kişisel olarak deneyin

Açıklama:Internet Explorer 8 veya daha eski sürümler desteklenmemektedir addEventListener() 方法。

技术细节

冒泡：	支持
可取消：	支持
事件类型：	DragEvent
支持的 HTML 标签：	所有 HTML 元素
DOM 版本：	Level 3 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

事件	Chrome	IE	Firefox	Safari	Opera
ondragover	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 ----------------- */
// Sürüklenebilir p elementi droptarget'a girerken, DIV'in kenar çizgi 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 mümkün kılmak için elementin varsayılan işlemini önlemek zorundayız
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Sürüklenebilir p elementi droptarget'tan ayrılırken, DIV'in kenar çizgi 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şlemini önleyin (Bağlantı olarak açma durumunda varsayılan yerleştirme)
Çıktı metninin rengini ve DIV'in kenar çizgi rengini sıfırlayın
dataTransfer.getData() yöntemi ile sürükleme verisini alın
Sürüklenebilir veri, sürüklenebilir elementin id'sidir ("drag1")
Sürüklenebilir 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>

Kişisel olarak deneyin