El evento dragover
se activa cuando un elemento o texto se arrastra a un objetivo válido (cada pocos cientos de milisegundos).
El evento se activa en la caída al objetivo.
General info
Bubbles | Yes |
Cancelable | Yes |
Target objects | Document , Element |
Interface | DragEvent |
Default Action | Reset the current drag operation to "none". |
Properties
Property | Type | Description |
---|---|---|
target Read only |
EventTarget |
El elemento que se encontraba bajo el elemento que está siendo arrastrado. |
type Read only |
DOMString |
El tipo de evento. |
bubbles Read only |
Boolean |
Si el evento se propaga normalmente o no. |
cancelable Read only |
Boolean |
Si el evento es cancelable o no. |
view Read only |
WindowProxy |
document.defaultView (window del documento) |
detail Read only |
long (float ) |
0. |
dataTransfer |
DataTransfer | Los datos que subyacen a la operación de drag-and-drop , conocidas como drag data store. Modo protegido. |
currentTarget Read only |
EventTarget | El nodo que tiene adjunto el detector de eventos. |
relatedTarget Read only |
EventTarget | Para los eventos de mouseover , mouseout , mouseenter y mouseleave :El objetivo del evento complementario (el objetivo mouseleave en el caso del evento mouseenter ). null sino. |
screenX Read only |
long | La coordinada X del puntro del ratón en coordenadas globales (de pantalla). |
screenY Read only |
long | La coordinada Y del puntero del ratón en coordenadas globales (en pantalla). |
clientX Read only |
long | La coordinada X del puntro del ratón en coordenadas locales (DOM content). |
clientY Read only |
long | La coordinada Y del puntro del ratón en coordenadas locales (DOM content). |
button Read only |
unsigned short |
El número de botón que se preionó cuando el ecento fue ectivado: Botón izquierdo=0, botón del medio=1(en caso de que esté presente), botón derecho=2. Para ratones configurados para zurdos donde laas acciones están configuradas al contrario los valores se leerán de derecha a izquierda. |
buttons Read only |
unsigned short |
Los botones presionados cuando el evento de ratón se activa: botón izquierdo=1,botón derecho=2, botón medio (rueda)=4, 4º botón (tipo "hacia atrás del navegador"=8, 5º botón ("tipo hacia delante en el navegador"=16. Si dos o más botones se presionan, devolverá la suma lógica de los valores. Ej: si se presionan los botones izquierdo y derecho, devolverá 3 (=1|2). Más información. |
mozPressure Read only |
float |
La cantidad de presión aplicada en dispositivos táctiles cuando se genera el evento; Este valor tiene un rango entre 0.0 (mínima presión) y 1.0 (máxima presión) |
ctrlKey Read only |
boolean | true si la tecla control estaba pulsada cuando el evento se lanzó false en cualquier otro caso. |
shiftKey Read only |
boolean | true si la tecla shift estaba pulsada cuando el evento de lanzó. false en otro caso. |
altKey Read only |
boolean | true si la tecla alt estaba pulsada cuando el evento se lanzó. false si no. |
metaKey Read only |
boolean | true si la tecla meta estaba presionada cuando el evento se disparó. false si no. |
Example
<div class="dropzone">
<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
This div is draggable
</div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<style>
#draggable {
width: 200px;
height: 20px;
text-align: center;
background: white;
}
.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin-bottom: 10px;
padding: 10px;
}
</style>
<script>
var dragged;
/* events fired on the draggable target */
document.addEventListener("drag", function( event ) {
}, false);
document.addEventListener("dragstart", function( event ) {
// store a ref. on the dragged elem
dragged = event.target;
// make it half transparent
event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function( event ) {
// reset the transparency
event.target.style.opacity = "";
}, false);
/* events fired on the drop targets */
document.addEventListener("dragover", function( event ) {
// prevent default to allow drop
event.preventDefault();
}, false);
document.addEventListener("dragenter", function( event ) {
// highlight potential drop target when the draggable element enters it
if ( event.target.className == "dropzone" ) {
event.target.style.background = "purple";
}
}, false);
document.addEventListener("dragleave", function( event ) {
// reset background of potential drop target when the draggable element leaves it
if ( event.target.className == "dropzone" ) {
event.target.style.background = "";
}
}, false);
document.addEventListener("drop", function( event ) {
// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged elem to the selected drop target
if ( event.target.className == "dropzone" ) {
event.target.style.background = "";
dragged.parentNode.removeChild( dragged );
event.target.appendChild( dragged );
}
}, false);
</script>
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard La definición de 'dragover' en esta especificación. |
Living Standard | |
HTML 5.1 La definición de 'dragover' en esta especificación. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 4 | (Yes) | 3.5 (1.9.1) | 10 | 12 | 3.1 |
Feature | Android | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|---|
Basic support | Sin soporte | Sin soporte | Sin soporte | (Yes) | Sin soporte | Sin soporte | 10 | Sin soporte | Sin soporte |