--- title: dragenter slug: Web/API/Document/dragenter_event translation_of: Web/API/Document/dragenter_event ---
{{APIRef}}

L'événement dragenter est déclenché lorsqu'un élément glissé ou une sélection de texte entre dans une cible de drop valide.

Informations générales

Interface
{{domxref("DragEvent")}}
Propagation
Oui
Annulable
Oui
Cible
La sélection immédiate de l'utilisateur (l'élément présentement indiqué par l'utilisateur comme cible pour le drop), ou l'élément {{HTMLElement("body")}}.
Action par défaut
Rejette la sélection immédiate de l'utilisateur comme élément cible potentiel

Properties

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.

Exemple

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

  /* Les événements sont déclenchés sur les objets glissables */
  document.addEventListener("drag", function( event ) {

  }, false);

  document.addEventListener("dragstart", function( event ) {
      // Stocke une référence sur l'objet glissable
      dragged = event.target;
      // transparence 50%
      event.target.style.opacity = .5;
  }, false);

  document.addEventListener("dragend", function( event ) {
      // reset de la transparence
      event.target.style.opacity = "";
  }, false);

  /* Les événements sont déclenchés sur les cibles du drop */
  document.addEventListener("dragover", function( event ) {
      // Empêche default d'autoriser le drop
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
      event.preventDefault();
      // Déplace l'élément traîné vers la cible du drop sélectionnée
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }

  }, false);
</script>

Spécifications

Spécification Statut Commentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}} {{Spec2("HTML WHATWG")}}  
{{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}} {{Spec2("HTML5.1")}} Définition initiale

Compatiblités navigateurs

{{Compat("api.Document.dragenter_event")}}

Voir aussi