HTMLElement: dragstart event

Usar el nombre del evento en métodos como addEventListener() , o establecer una propiedad de controlador de eventos.

addEventListener("dragstart", (event) => {});

ondragstart = (event) => {};

Un DragEvent. Hereda de Event.

En adición a las propiedades listadas, a continuación las propiedades de la interfaz principal, Event, están disponibles.

DragEvent.dataTransfer (en-US) Read only

Los datos que se transfieren durante una interacción de arrastrar y soltar.

En este ejemplo, tenemos un elemento arrastrable dentro de un contenedor. Intenta agarrar el elemento, arrastralo y luego sueltalo.

Escuchamos el evento dragstart para hacer que el elemento sea medio transparente mientras se arrastra.

For a more complete example of drag (en-US) and drop, see the page for the drag event.

HTML

<div id="container">
  <div id="draggable" draggable="true">Este div es arrastrable</div>
</div>
<div class="dropzone"></div>

CSS

body {
  /* Impedir que el usuario seleccione texto en el ejemplo */
  user-select: none;
}
#draggable {
  text-align: center;
  background: white;
}
#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}
.dragging {
  opacity: 0.5;
}

JavaScript

const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // hazlo medio transparente
  event.target.classList.add("dragging");
});
source.addEventListener("dragend", (event) => {
  // restablecer la transparencia
  event.target.classList.remove("dragging");
});

Resultado

• Otros eventos de arrastre:
  • drag (en-US)
  • dragend (en-US)
  • dragover
  • dragenter (en-US)
  • dragleave (en-US)
  • drop (en-US)
• Este evento en otros objetivos:
  • Window: dragstart event
  • Document: dragstart (en-US) event
  • SVGElement (en-US): dragstart event