Table des matières

Le Tutoriel de Javascript DragEvent

View more Tutorials:

1- DragEvent

DragEvent est une interface qui représente les événements se produisant pendant le glisser-déposer (drag & drop) d’un objet d’un endroit à un autre. Un utilisateur déclenche un glisser (drag) en plaçant un périphérique pointeur (pointer device) (comme une souris) sur la surface d’un objet, appuyez sur le bas (press down) et déplacez le périphérique pointeur à un autre endroit, puis relâche (release) le périphérique pointeur, pour déposer (drop) l’objet dans un nouvel emplacement.
DragEvent est une sous interface de  MouseEvent, elle hérite donc toutes les propriétés (property) et les méthodescde  MouseEvent.
Voici la liste des types d'événements qui se produiront pendant le glisser-déposer  
Evénement Type d'événement Description
dragstart Dragged Element L'événement se produit lorsque l'utilisateur commence à faire glisser un élément.
drag L'événement se produit lorsqu'un élément est glissé.
dragend L'événement se produit lorsque l'utilisateur a terminé de faire glisser un élément.

dragenter Drop Target L'événement se produit lorsque l'élément glissé entre dans la cible de dépôt (drop target).
dragover L'événement se produit lorsque l'élément glissé se trouve au-dessus (over) de la cible de dépôt.
dragleave L'événement se produit lorsque l'élément glissé quitte la cible de dépôt.
drop L'événement se produit lorsque l'élément glissé est déposé (drop) sur la cible de dépôt.
Illustrations d'événements se produisant pendant le glisser-déposer (drag drop).
 
Propriété Description
dataTransfer Renvoie les données qui sont glissées/ déposées
Voir un exemple simple :
dragevents-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>DragEvent Example</title>

      <script src="dragevents-example.js"></script>
      <style>
      .droptarget-div {
        float: left;
        width: 100px;
        height: 55px;
        margin: 25px 25px 5px 5px;
        padding: 10px;
        border: 1px solid black;
      }
      #dragtarget-div {
         background: #eee;
         padding: 5px;
      }
      </style>
   </head>
   <body>

      <h3>DragEvent example</h3>

      <p id="log-div">..</p>

      <!-- Drop Target 1 -->
      <div class="droptarget-div"
            ondragenter= "ondragenterHandler(event)"
            ondragover="dragoverHandler(event)"
            ondrop="dropHandler(event)">

         <p id="dragtarget-div"
               ondragstart="dragstartHandler(event)"
               ondrag="dragHandler(event)"
               draggable="true">
            Drag me!
          </p>

      </div>

      <!-- Drop Target 2 -->
      <div class="droptarget-div"
           ondragenter= "ondragenterHandler(event)"
           ondragover="dragoverHandler(event)"
           ondrop="dropHandler(event)">

      </div>




   </body>
</html>

 
dragevents-example.js
// --------- Handlers for 'Dragged Element' ------------------
function dragstartHandler(evt) {
  evt.dataTransfer.setData("MyDraggedElementId", evt.target.id);
}

// dragging ...
function dragHandler(evt) {
   showLog("The p element is being dragged");
}


// --------- Handlers for 'Drop Target' ------------------

function ondragenterHandler()  {
   showLog("The p element enter drop-target");
}

// When 'over' you can 'release mouse' to 'drop'.
function dragoverHandler(evt) {
    evt.preventDefault(); // Important!!
}

function dropHandler(evt) {
   evt.preventDefault(); // Important!!

   var elementId = evt.dataTransfer.getData("MyDraggedElementId");
   evt.target.appendChild(document.getElementById(elementId));
   showLog("The p element was dropped");
}

// -------------------------------------------------------

function showLog(text)  {
   document.getElementById("log-div").innerHTML = text;
}

 
-
Par exemple, des utilisateurs glissent des fichiers sur leur ordinateur et les déposent dans un élément <div>, vous pouvez lire les informations de base et le contenu des fichiers que l'utilisateur a déposés.
Lorsque l'événement  drop se produit, event.dataTransfer.files renvoie un objet  FileList, cet objet contient la liste des objets  File.
drop-files-example.html
<!DOCTYPE html>
<html>

<head>
    <title>DragEvent Example</title>
    <meta charset="UTF-8">

    <script src="drop-files-example.js"></script>

    <style>
        #drop-area {
            border: 1px solid blue;
            padding: 15px;
        }
    </style>

</head>

<body>

    <h3>Drop files example</h3>

    <div id="drop-area" ondragover="dragoverHandler(event)" ondrop="dropHandler(event)">
        Drop files here
    </div>

    <output id="log-div"></output>

</body>

</html>
 
drop-files-example.js
function dropHandler(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    // FileList object.
    var files = evt.dataTransfer.files;

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), //
            '</strong> (', f.type || 'n/a', ') - ', //
            f.size, ' bytes, last modified: ',
            f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
            '</li>');
    }
    document.getElementById('log-div').innerHTML = '<ul>' + output.join('') + '</ul>';
}

function dragoverHandler(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    // Explicitly show this is a copy.
    evt.dataTransfer.dropEffect = 'copy';
}
 

View more Tutorials: