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.
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.dataTransferRead 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
<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
Especificaciones
| Specification |
|---|
| HTML Standard # ix-handler-ondragstart |
| HTML Standard # event-dnd-dragstart |
Compatibilidad con navegadores
BCD tables only load in the browser