HTMLElement: dragstart event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

El evento dragstart se dispara cuando el usuario arrastra un elemento o una selección de texto.

Sintaxis

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

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

ondragstart = (event) => {};

Tipo de Evento

Propiedades del Evento

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

DragEvent.dataTransfer Read only

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

Ejemplos

Configurar la opacidad al inicio del movimiento

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 and drop, see the page for the drag event.

HTML

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

CSS

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

js
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

Especificaciones

Specification
HTML Standard
# ix-handler-ondragstart
HTML Standard
# event-dnd-dragstart

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también