Evento ondragenter
Definición y uso
El evento ondragenter se desencadena cuando un elemento arrastrable o una selección de texto entra en un objetivo de colocación válido.
los eventos ondragenter y ondragleave 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 y quitar el color cuando sale.
El arrastrar y soltar es una función muy común en HTML5. Es cuando 'capturas' un objeto y lo arrastras a diferentes posiciones. Para aprender más, lea nuestra información sobre Arrastrar y soltar HTML5de HTML.
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 sin necesidad de 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 - Se desencadena cuando el usuario comienza a arrastrar el elemento
- ondrag - Se desencadena cuando el elemento se arrastra
- ondragend - Se desencadena cuando el usuario completa el arrastre del elemento
Eventos que se desencadenan en el objetivo de colocación:
- ondragenter - Se desencadena cuando el elemento arrastrable entra en el objetivo de colocación
- ondragover - Se desencadena cuando el elemento arrastrable está en el objetivo de colocación
- ondragleave - Se desencadena cuando el elemento arrastrado se aleja del objetivo de colocación
- ondrop - Se desencadena cuando el elemento arrastrado se coloca en el objetivo de colocación
Ejemplo
Ejecutar JavaScript cuando un elemento arrastrable entra en el objetivo de colocación:
<div ondragenter="myFunction(event)"></div>
Más ejemplos de TIY en la parte inferior de la página.
Sintaxis
En HTML:
<elemento ondragenter="myScript">
En JavaScript:
objeto.ondragenter = function(){myScript};
En JavaScript, utilice el método addEventListener():
objeto.addEventListener("dragenter", myScript);
Notas:Internet Explorer 8 o versiones anteriores no son compatibles addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragenter | 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 droptarget, cambiar el estilo del borde del DIV cuando el elemento p arrastrable entra
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Por defecto, no se puede放置数据/elementos en otros elementos. Para permitir la colocación, debemos bloquear el procesamiento predeterminado del elemento
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Al salir del droptarget, resetear el estilo del borde del DIV cuando el elemento p arrastrable sale
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 soltar como enlace por defecto) */
Restablecer el color del texto de salida y el color del borde del DIV
Obtener los datos arrastrados utilizando el método dataTransfer.getData()
Los datos arrastrados son el id del elemento arrastrado ("drag1")
Añadir 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>
