ondragleave event

Definitie en gebruik

De ondragleave-gebeurtenis vindt plaats wanneer een dragbaar element of een tekstselectie de geldige doelpositie verlaat.

ondragenter en ondragleave gebeurtenissen helpen gebruikers te begrijpen dat een dragbaar element binnenkort de doelpositie zal binnenkomen of verlaten. Bijvoorbeeld, je kunt de achtergrondkleur instellen wanneer het dragbare element de doelpositie binnenkomt en de kleur verwijderen wanneer het element de doelpositie verlaat.

Drag-and-drop is een zeer gebruikelijke functie in HTML5. Dit is wanneer je een object "grijpt" en het naar een andere positie sleep. Voor meer informatie, lees ons over HTML5 drag and dropHTML handleiding.

Opmerking:Om een element dragbaar te maken, gebruik dan de globale HTML5 draggable-eigenschap.

Tip:Standaard zijn links en afbeeldingen dragbaar zonder de draggable-eigenschap nodig te hebben.

Bij verschillende stadia van de drag-and-drop-operatie worden veel gebeurtenissen gebruikt en kunnen deze optreden:

Gebeurtenissen die op het dragbare doel (bron-element) worden geactiveerd:

ondragstart - Wanneer de gebruiker het element begint te draggen, gebeurt dit
ondrag - Wanneer het element wordt gedrag, gebeurt dit
ondragend - Wanneer de gebruiker het dragbare element voltooit, gebeurt dit

Gebeurtenissen die op de doelpositie worden geactiveerd:

ondragenter - Wanneer het gedragbare element de doelpositie binnenkomt, gebeurt dit
ondragover - Wanneer het gedragbare element op de doelpositie staat, gebeurt dit
ondragleave - Wanneer het gedragbare element de doelpositie verlaat, gebeurt dit
ondrop - Wanneer het gedragbare element op de doelpositie wordt geplaatst, gebeurt dit

Example

Voer JavaScript uit wanneer een dragbare element uit de doelpositie wordt verplaatst:

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

Probeer het zelf

Er zijn meer TIY voorbeelden onder de pagina.

Syntax

In HTML:

<element ondragleave="myScript">

Probeer het zelf

In JavaScript:

object.ondragleave = function(){myScript};

Probeer het zelf

In JavaScript, gebruik de addEventListener() Methode:

object.addEventListener("dragleave", myScript);

Probeer het zelf

Opmerking:Internet Explorer 8 of eerder wordt niet ondersteund addEventListener() Methode.

Technical Details

Bubble:	Supported
Cancellable:	Not supported
Event type:	DragEvent
Supported HTML tags:	All HTML elements
DOM Version:	Level 3 Events

Browser Support

The numbers in the table indicate the first browser version that fully supports the event.

Event	Chrome	IE	Firefox	Safari	Opera
ondragleave	4.0	9.0	3.5	6.0	12.0

Example

For all possible drag-and-drop events demonstration:

<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";
});
/* ----------------- Gebeurtenissen die worden getriggerd op het plaatsingsdoel ----------------- */
// Wanneer het dragbare p-element de droptarget binnenkomt, wijzig de randstijl van de DIV
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// Standaard kan geen gegevens/elementen in andere elementen worden geplaatst. Om plaatsen te toestaan, moeten we de standaard verwerking van het element blokkeren
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Wanneer het dragbare p-element de droptarget verlaat, reset de randstijl van de DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Bij neerzetten - Voorkom de standaard verwerking van de browser voor gegevens (bij standaard plaatsen wordt geopend als koppeling) */
Herstel de kleur van de uitvoer tekst en de DIV randkleur
Gebruik de methode dataTransfer.getData() om de gedraagde gegevens te verkrijgen
De gedraggegevens zijn de id van het te slepen element ("drag1")
Het te slepen element wordt toegevoegd aan het plaatsingselement
*/
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>

Probeer het zelf