devstory

Le Tutoriel de Javascript DragEvent

  1. 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';
}

Tutoriels de programmation ECMAScript, Javascript

Show More