--- title: drag slug: Web/API/Document/drag_event tags: - DOM - Zdarzenie - przeciągnij i upuść translation_of: Web/API/Document/drag_event ---
{{APIRef}}

Zdarzenie przeciągania uruchamiane jest po przeciągnięciu elementu lub tekstu (co kilkaset milisekund).

Ogólne informacje

Bąbelkowanie Tak
Cancelable Tak
Obiekt docelowy {{domxref("Document")}}, {{domxref("Element")}}
Interfejs {{domxref("DragEvent")}}
Domyślna akcja Kontynuuje operacje przeciągania i upuszczania

Właściwości

Property Type Description
target {{readonlyInline}} EventTarget The element that was underneath the element being dragged.
type {{readonlyInline}} DOMString The type of event.
bubbles {{readonlyInline}} Boolean Whether the event normally bubbles or not
cancelable {{readonlyInline}} Boolean Whether the event is cancellable or not?
view {{readonlyInline}} WindowProxy document.defaultView (window of the document)
detail {{readonlyInline}} long (float) 0.
dataTransfer DataTransfer The data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}} EventTarget The node that had the event listener attached.
relatedTarget {{readonlyInline}} EventTarget For mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}} long The X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}} long The Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}} long The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}} long The Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}} unsigned short The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}} unsigned short The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}} float The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}} boolean true if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}} boolean true if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}} boolean true if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}} boolean true if the meta key was down when the event was fired. false otherwise.

Przykład

<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>

Specyfikacja

Specification Status Comment
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}} {{Spec2("HTML WHATWG")}}  
{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}} {{Spec2("HTML5.1")}} Initial definition

Obsługiwane przeglądarki

{{CompatibilityTable}}

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 {{CompatVersionUnknown}} {{CompatGeckoDesktop("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 {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatNo}} {{CompatNo}} {{CompatIE("10")}} {{CompatNo}} {{CompatNo}}

Zobacz również