Your Search Results

    dragenter Redirect 1

    The dragenter event is fired when a dragged element or text selection enters a valid drop target.

    General info

    Specification
    HTML5
    Interface
    DragEvent
    Bubbles
    Yes
    Cancelable
    Yes
    Target
    Document, Element
    Default Action
    Reject immediate user selection as potential target element.

    Properties

    Property Type Description
    target Read only EventTarget The element underneath the element being dragged.
    type Read only DOMString The type of event.
    bubbles Read only boolean Does the event normally bubble?
    cancelable Read only boolean Is it possible to cancel the event?
    view Read only WindowProxy document.defaultView (the window of the document).
    detail Read only long (float) 0.
    dataTransfer DataTransfer The data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
    currentTarget Read only EventTarget (DOM element) The node that had the event listener attached.
    relatedTarget Read only EventTarget (DOM element) 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 Read only long (int) The X coordinate of the mouse pointer in global (screen) coordinates.
    screenY Read only long (int) The Y coordinate of the mouse pointer in global (screen) coordinates.
    clientX Read only long (int) The X coordinate of the mouse pointer in local (DOM content) coordinates.
    clientY Read only long (int) The Y coordinate of the mouse pointer in local (DOM content) coordinates.
    button Read only unsigned short (int) 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 Read only DOM level 3 unsigned short (int) 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 Read only 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 Read only boolean true if the control key was down when the event was fired. false otherwise.
    shiftKey Read only boolean true if the shift key was down when the event was fired. false otherwise.
    altKey Read only boolean true if the alt key was down when the event was fired. false otherwise.
    metaKey Read only boolean true if the meta key was down when the event was fired. false otherwise.

    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>
    

    Document Tags and Contributors

    Contributors to this page: ethertank
    Last updated by: ethertank,