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
# ix-handler-ondragstart
HTML
# event-dnd-dragstart

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
dragstart event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Véase también