Evento ondrop
Definición y uso
El evento ondrop se desencadena cuando un elemento arrastrable o la selección de texto se coloca en un objetivo de colocación válido.
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, lee 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 la 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 - 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 desencadenados en el objetivo de colocación:
- ondragenter - Se desencadena cuando el elemento arrastrado entra en el objetivo de colocación.
- ondragover - Se desencadena cuando el elemento arrastrado se encuentra 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 en el elemento <div> cuando se coloca un elemento arrastrable:
<div ondrop="myFunction(event)"></div>
Más ejemplos TIY en la parte inferior de la página.
Sintaxis
En HTML:
<elemento ondrop="myScript">
En JavaScript:
objeto.ondrop = function(){myScript};
En JavaScript, utilice el método addEventListener():
objeto.addEventListener("drop", myScript);
Notas:Internet Explorer 8 o versiones anteriores no son compatibles addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondrop | 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, 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放置 datos/elementos en otros elementos. Para permitir la colocación, debemos evitar el tratamiento predeterminado del elemento
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Al salir del droptarget, 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 tratamiento 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 utilizando 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>
