From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../es/web/api/document/dragover_event/index.html | 338 +++++++++++++++++++++ 1 file changed, 338 insertions(+) create mode 100644 files/es/web/api/document/dragover_event/index.html (limited to 'files/es/web/api/document/dragover_event/index.html') diff --git a/files/es/web/api/document/dragover_event/index.html b/files/es/web/api/document/dragover_event/index.html new file mode 100644 index 0000000000..c4fe204135 --- /dev/null +++ b/files/es/web/api/document/dragover_event/index.html @@ -0,0 +1,338 @@ +--- +title: dragover +slug: Web/API/Document/dragover_event +translation_of: Web/API/Document/dragover_event +--- +
{{APIRef}}
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableYes
Target objects{{domxref("Document")}}, {{domxref("Element")}}
Interface{{domxref("DragEvent")}}
Default ActionReset the current drag operation to "none".
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetEl elemento que se encontraba bajo el elemento que está siendo arrastrado.
type {{readonlyInline}}DOMStringEl tipo de evento.
bubbles {{readonlyInline}}BooleanSi el evento se propaga normalmente o no.
cancelable {{readonlyInline}}BooleanSi el evento es cancelable o no.
view {{readonlyInline}}WindowProxydocument.defaultView (window del documento)
detail {{readonlyInline}}long (float)0.
dataTransferDataTransferLos datos que subyacen a la operación de drag-and-drop , conocidas como drag data store. Modo protegido.
currentTarget {{readonlyInline}}EventTargetEl nodo que tiene adjunto el detector de eventos.
relatedTarget {{readonlyInline}}EventTargetPara 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 {{readonlyInline}}longLa coordinada X del puntro del ratón en coordenadas globales (de pantalla).
screenY {{readonlyInline}}longLa coordinada Y del puntero del ratón en coordenadas globales (en pantalla).
clientX {{readonlyInline}}longLa coordinada X del puntro del ratón en coordenadas locales (DOM content).
clientY {{readonlyInline}}longLa coordinada Y del puntro del ratón en coordenadas locales (DOM content).
button {{readonlyInline}}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 {{readonlyInline}}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 {{readonlyInline}}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 {{readonlyInline}}booleantrue si la tecla control estaba pulsada cuando el evento se lanzó false en cualquier otro caso.
shiftKey {{readonlyInline}}booleantrue si la tecla shift estaba pulsada cuando el evento de lanzó. false en otro caso.
altKey {{readonlyInline}}booleantrue si la tecla alt estaba pulsada cuando el evento se lanzó. false si no.
metaKey {{readonlyInline}}booleantrue 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

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}{{Spec2("HTML5.1")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}10123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf