Evento ondragend
Definición y uso
Se desencadena el evento ondragend cuando el usuario completa el arrastre del elemento o la selección de texto.
El arrastrar y soltar es una función muy común en HTML5. Es cuando usted "toma" un objeto y lo arrastra a diferentes posiciones. Para aprender más, lea nuestra información sobre Arrastrar y soltar HTML5de HTML.
Nota:Para hacer que un elemento sea arrastrable, utilice el tutorial global Atributo draggable de HTML5。
Consejo:Por defecto, los enlaces y las 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 desencadenados en el objetivo arrastrable (elemento de origen):
- ondragstart - Ocurre cuando el usuario comienza a arrastrar el elemento
- ondrag - Ocurre cuando se arrastra el elemento
- ondragend - Ocurre cuando el usuario completa el arrastre del elemento
Eventos desencadenados en el objetivo de colocación:
- ondragenter - Ocurre cuando el elemento arrastrado entra en el objetivo de colocación
- ondragover - Ocurre cuando el elemento arrastrado está en el objetivo de colocación
- ondragleave - Ocurre cuando el elemento arrastrado se aleja del objetivo de colocación
- ondrop - Ocurre cuando el elemento arrastrado se coloca en el objetivo de colocación
Ejemplo
Ejecutar JavaScript cuando el usuario complete el arrastre del elemento <p>:
<p draggable="true" ondragend="myFunction(event)">¡Arrástrame!</p>
En la parte inferior de la página hay más ejemplos de TIY.
Sintaxis
En HTML:
<element ondragend="myScript">
En JavaScript:
object.ondragend = function(){myScript};
En JavaScript, utilice el método addEventListener():
object.addEventListener("dragend", myScript);
Nota:Internet Explorer 8 o versiones anteriores no lo admiten Método addEventListener()。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 不支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragend | 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 al droptarget cuando el elemento p arrastrable entra, 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 bloquear el procesamiento predeterminado del elemento
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Al salir del droptarget cuando el elemento p arrastrable se aleja, 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 soltar 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>
