Le Tutoriel de Javascript DragEvent

DragEvent

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	Dragged Element	L'événement se produit lorsqu'un élément est glissé.
dragend	Dragged Element	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	Drop Target	L'événement se produit lorsque l'élément glissé se trouve au-dessus (over) de la cible de dépôt.
dragleave	Drop Target	L'événement se produit lorsque l'élément glissé quitte la cible de dépôt.
drop	Drop Target	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';
}

https://developer.mozilla.org/en-US/docs/Web/API/File

Le Tutoriel de Javascript DragEvent

1. DragEvent

Tutoriels de programmation ECMAScript, Javascript

Tutoriels de programmation ECMAScript, Javascript

Articles les plus récents