Événement ondragleave

Événements DOM DragEvent

Définition et utilisation

Un événement ondragleave se produit lorsque l'élément glissant ou le texte sélectionné quitte la cible de dépose valide.

Les événements ondragenter et ondragleave aident les utilisateurs à comprendre que某一 élément glissant est sur le point d'entrer ou de quitter la cible de dépose. Par exemple, vous pouvez définir une couleur de fond lorsque l'élément glissant entre dans la cible de dépose et supprimer la couleur lorsque l'élément quitte la cible.

Le glisser-déposer est une fonctionnalité très courante dans HTML5. Il s'agit de "prendre" un objet et de le glisser à un autre emplacement. Pour en savoir plus, lisez notre article sur Glisser-déposer HTML5de notre tutoriel HTML.

Remarque :Pour rendre un élément glissant, utilisez le tutoriel HTML global Propriété draggable HTML5。

Astuce :Par défaut, les liens et les images sont glissables sans avoir besoin de la propriété draggable.

À différents stades de l'opération de glisser-déposer, de nombreux événements sont utilisés et peuvent se produire :

Événements déclenchés sur l'élément cible glissant (élément source) :

  • ondragstart - Lorsque l'utilisateur commence à glisser l'élément
  • ondrag - Lorsque l'élément est glissé
  • ondragend - Lorsque l'utilisateur termine le glisser-déposer de l'élément

Événements déclenchés sur la cible de dépose :

  • ondragenter - Lorsque l'élément glissant entre dans la cible de dépose
  • ondragover - Lorsque l'élément glissant est sur la cible de dépose
  • ondragleave - Lorsque l'élément glissant quitte la cible de dépose
  • ondrop - Lorsque l'élément glissant est placé sur la cible de dépose

实例

Exécutez du JavaScript lorsque l'élément glissant quitte la cible de dépose :

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

Essayez-le vous-même

Vous trouverez plus d'exemples TIY en bas de la page.

Syntaxe

Dans HTML :

<element ondragleave="myScript">

Essayez-le vous-même

Dans JavaScript :

object.ondragleave = function() {myScript};

Essayez-le vous-même

Dans JavaScript, utilisez la méthode addEventListener() :

object.addEventListener("dragleave", myScript);

Essayez-le vous-même

Remarque :Internet Explorer 8 ou versions antérieures ne prennent pas en charge méthode addEventListener()。

技术细节

冒泡： 支持
可取消： 不支持
事件类型： 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";
});
/* ----------------- Événements déclenchés sur le point de destination de placement ----------------- */
// Lorsque l'élément p glissable entre dans le droptarget, changer le style de bordure du DIV
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// Par défaut, les données/éléments ne peuvent pas être placés dans d'autres éléments. Pour permettre le placement, nous devons empêcher le traitement par défaut de l'élément
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Lorsque l'élément p glissable quitte le droptarget, réinitialiser le style de bordure du DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Sur le dépose - Empêcher le traitement par défaut du navigateur des données (par défaut, ouvrir les liens lors du dépose) */
Réinitialiser la couleur du texte de sortie et la couleur de la bordure du DIV
Obtenir les données glissées en utilisant la méthode dataTransfer.getData()
Les données glissées sont l'ID de l'élément glissé ("drag1")
Ajouter l'élément glissé dans l'élément de destination
*/
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>

Essayez-le vous-même

Pages associées

Tutoriel HTML : glisser-déposer HTML5

Manuel HTML : propriété draggable HTML

Événements DOM DragEvent