dragover

  • Revision slug: Web/Reference/Events/dragover
  • Revision title: dragover
  • Revision id: 402479
  • Created:
  • Creator: Sheppy
  • Is current revision? Yes
  • Comment Moved From DOM/Mozilla_event_reference/dragover to Web/Reference/Events/dragover

Revision Content

The dragover event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).

General info

Specification
HTML5
Interface
DragEvent
Bubbles
Yes
Cancelable
Yes
Target
Document, Element
Default Action
Reset the current drag operation to "none".

Properties

{{OpenEventProperties("The element underneath the element being dragged.")}}{{UIEventProperties()}}{{DragEventProperties()}}{{MouseEventProperties()}}{{ModifiersEventProperties()}}{{CloseEventProperties()}}

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>

{{DragRelatedEvents()}}

Revision Source

<p>The <code>dragover</code> event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).</p>
<h2 id="General_info">General info</h2>
<dl>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Specification</dt>
  <dd style="margin: 0 0 0 120px;">
    <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Interface</dt>
  <dd style="margin: 0 0 0 120px;">
    DragEvent</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Bubbles</dt>
  <dd style="margin: 0 0 0 120px;">
    Yes</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Cancelable</dt>
  <dd style="margin: 0 0 0 120px;">
    Yes</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Target</dt>
  <dd style="margin: 0 0 0 120px;">
    Document, Element</dd>
  <dt style="clear: left; float: left; text-align: right; width: 120px;">
    Default Action</dt>
  <dd style="margin: 0 0 0 120px;">
    Reset the current drag operation to "none".</dd>
</dl>
<h2 id="Properties">Properties</h2>
<p>{{OpenEventProperties("The element underneath the element being dragged.")}}{{UIEventProperties()}}{{DragEventProperties()}}{{MouseEventProperties()}}{{ModifiersEventProperties()}}{{CloseEventProperties()}}</p>
<h2 id="Example">Example</h2>
<pre class="brush: js">
&lt;div class="dropzone"&gt;
&nbsp;&nbsp;&nbsp; &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This div is draggable
&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&lt;/div&gt;
&lt;div class="dropzone"&gt;&lt;/div&gt;
&lt;div class="dropzone"&gt;&lt;/div&gt;
&lt;div class="dropzone"&gt;&lt;/div&gt;

&lt;style&gt;
  #draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
  }

  .dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;
  }
&lt;/style&gt;

&lt;script&gt;
  <span>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);</span>
&lt;/script&gt;
</pre>
<h2 id="Related_Events">Related Events</h2>
<p>{{DragRelatedEvents()}}</p>
Revert to this revision