Evento ondrag

Eventos DOM DragEvent

Definición y uso

El evento ondrag se produce cuando se arrastra un elemento o se selecciona texto.

El arrastrar y soltar es una función muy común en HTML5. Es cuando 'agarras' un objeto y lo arrastras a diferentes posiciones. Para aprender más, lee nuestro 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 desencadenados en el objetivo arrastrable (elemento fuente):

  • ondragstart - Se produce cuando el usuario comienza a arrastrar el elemento.
  • ondrag - Se produce cuando el elemento se arrastra.
  • ondragend - Se produce cuando el usuario completa el arrastre del elemento.

Eventos desencadenados en el objetivo de colocación:

  • ondragenter - Se produce cuando el elemento arrastrado entra en el objetivo de colocación.
  • ondragover - Se produce cuando el elemento arrastrado está en el objetivo de colocación.
  • ondragleave - Se produce cuando el elemento arrastrado se aleja del objetivo de colocación.
  • ondrop - Se produce cuando el elemento arrastrado se coloca en el objetivo de colocación.

Notas:El evento ondrag se desencadena cada 350 milisegundos al arrastrar el elemento.

Ejemplo

Ejecuta JavaScript al arrastrar el elemento <p>:

<p draggable="true" ondrag="myFunction(event)">¡Arrástrame!</p>

Prueba por ti mismo

Más ejemplos de TIY en la parte inferior de la página.

Sintaxis

En HTML:

<element ondrag="myScript">

Prueba por ti mismo

En JavaScript:

object.ondrag = function(){myScript};

Prueba por ti mismo

En JavaScript, utilice el método addEventListener():

object.addEventListener("drag", myScript);

Prueba por ti mismo

Notas:Internet Explorer 8 o versiones anteriores no son compatibles addEventListener() 方法。

技术细节

冒泡： 支持
可取消： 支持
事件类型： DragEvent
支持的 HTML 标签： 所有 HTML 元素
DOM 版本： Level 3 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

事件 Chrome IE Firefox Safari Opera
ondrag 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 el elemento p arrastrable en 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放置数据/elemento 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 elemento p arrastrable de droptarget, restablecer el estilo del borde del DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Al soltar - evitar 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>

Prueba por ti mismo

Páginas relacionadas

Tutorial de HTML：Arrastrar y soltar HTML5

Manual de referencia de HTML:Atributo draggable de HTML

Eventos DOM DragEvent