ondragleave olayı

Tanım ve Kullanım

Sürüklenebilir bir element veya metin seçimi geçerli yerleştirme hedefinden ayrıldığında ondragleave olayı tetiklenir.

ondragenter ve ondragleave olayları, kullanıcıya bir sürüklenebilir elementin yerleştirme hedefine yaklaştığını veya ayrıldığını anlatmak için yardımcı olur. Örneğin, sürüklenebilir elementin yerleştirme hedefine girdiğinde arka plan rengini ayarlayabilir ve elementin hedeften ayrıldığında rengi kaldırabilirsiniz.

Drag ve drop, HTML5'te çok yaygın bir özelliktir. Bir nesneyi "kap" ve farklı bir konuma sürüklemek demektir. Daha fazla bilgi edinmek için, ondragenter ve ondragleave olayları hakkında makalemizi okuyun. HTML5 TaşımaHTML dersimize bakı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.

Drag ve drop işlemi boyunca farklı aşamalarda birçok olay kullanılır ve olasıdır：

Draggable 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ı drag elementi tamamladığında gerçekleşir

Yerleştirme hedefinde tetiklenen olaylar：

ondragenter - Dragged elementin yerleştirme hedefine girdiğinde gerçekleşir
ondragover - Dragged elementin yerleştirme hedefinde olduğunda gerçekleşir
ondragleave - Dragged elementin yerleştirme hedefinden ayrıldığında gerçekleşir
ondrop - Dragged elementin yerleştirme hedefine konulduğunda gerçekleşir

实例

Draggable elementin yerleştirme hedefinden ayrıldığında JavaScript çalıştırılır：

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

Kişisel olarak deneyin

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

Sözdizimi

HTML'de：

<element ondragleave="myScript">

Kişisel olarak deneyin

JavaScript'te：

nesne.ondragleave = function(){myScript};

Kişisel olarak deneyin

JavaScript'te addEventListener() yöntemini kullanarak：

nesne.addEventListener("dragleave", myScript);

Kişisel olarak deneyin

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
ondragleave	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 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 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 - 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 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>

Kişisel olarak deneyin