Evento ondragleave
Recomendaciones de cursos:
Definición y uso
Ocurre el evento ondragleave cuando el elemento arrastrable o la selección de texto sale del objetivo de colocación válido.
ondragenter y ondragleave eventos ayudan a los usuarios a entender que un elemento arrastrable está a punto de entrar o salir del objetivo de colocación. Por ejemplo, se puede cambiar el color de fondo del elemento cuando entra en el objetivo de colocación y quitar el color cuando el elemento sale del objetivo. Arrastrar y soltar en HTML5de HTML. La funcionalidad de arrastrar y soltar es muy común en HTML5. Es cuando usted "agarra" un objeto y lo arrastra a diferentes posiciones. Para aprender más, lea nuestro artículo sobre
Notas:Para hacer que un elemento sea arrastrable, utilice el tutorial global Atributo draggable de HTML5。
Consejo:Por defecto, los enlaces e imágenes son arrastrables y no necesitan la propiedad draggable.
En diferentes etapas de la operación de arrastrar y soltar, se utilizan muchos eventos y pueden ocurrir:
Eventos que se desencadenan en el objetivo arrastrable (elemento de origen):
- ondragstart - Ocurre cuando el usuario comienza a arrastrar el elemento
- ondrag - Ocurre cuando el elemento se arrastra
- ondragend - Ocurre cuando el usuario completa el arrastre del elemento
Eventos que se desencadenan en el objetivo de colocación:
- ondragenter - Ocurre cuando el elemento arrastrable entra en el objetivo de colocación
- ondragover - Ocurre cuando el elemento arrastrable está en el objetivo de colocación
- ondragleave - Ocurre cuando el elemento arrastrable se aleja del objetivo de colocación
- ondrop - Ocurre cuando el elemento arrastrable se coloca en el objetivo de colocación
实例
Ejecute JavaScript cuando el elemento arrastrable se mueva fuera del objetivo de colocación:
<div ondragleave="myFunction(event)"></div>
En la parte inferior de la página hay más ejemplos de TIY.
Sintaxis
En HTML:
<elemento ondragleave="myScript">
En JavaScript:
objeto.ondragleave = function(){myScript};
En JavaScript, utilice el método addEventListener():
objeto.addEventListener("dragleave", myScript);
Notas:Internet Explorer 8 o versiones anteriores no lo admiten Método 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";
});
/* ----------------- Eventos desencadenados en el objetivo de colocación ----------------- */
// Al entrar en el droptarget cuando el elemento p arrastrable entra en él, cambiar el estilo del borde del DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Por defecto, no se puede colocar datos/elementos en otros elementos. Para permitir la colocación, debemos evitar el procesamiento predeterminado del elemento
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Al salir del droptarget cuando el elemento p arrastrable deja de estar sobre él, restablecer el estilo del borde del DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Al soltar - Prevenir el procesamiento predeterminado del navegador de los datos (al dejar caer como enlace por defecto) */
Restablecer el color del texto de salida y el color del borde del DIV
Obtener los datos arrastrados usando el método dataTransfer.getData()
Los datos arrastrados son el id del elemento arrastrado ("drag1")
Adjuntar el elemento arrastrado al elemento de destino
*/
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>
