Cодержание

Руководство Javascript DragEvent

1- DragEvent

DragEvent это интерфейс представляющий события, происходящие в процессе перетаскивания (drag & drop) объекта с одного места на другое. Пользователь инциирует перетаскивание (drag) поставив указательное устройство (pointer device) (Например мышь) на поверхности объекта, нажимает (press down), и передвигает курсор в другое место, потом отпускает (release) курсор, чтобы отпустить (drop) объект в новое расположение.
DragEvent это подинтерфейс  MouseEvent, поэтому он наследует все свойства (property) и методы у  MouseEvent.
Ниже является список видов событий, которые происходят в процессе перетаскивания.
Событие Вид элемента Описание
dragstart Dragged Element Событие происхоит, когда пользователь начинает перетаскивать элемент.
drag Событие происхоит, когда перетаскивается элемент.
dragend Событие происхоит, когда пользователь завершает перетаскивание элемента.

dragenter Drop Target Событие происхоит, когда перетаскиваемый элемент попадает в цель перетаскивания (drop target).
dragover Событие происхоит, когда элемент перетаскивается сверху (over) цели перетаскивание.
dragleave Событие происхоит, когда элемент перетаскивается из цели перетаскивания.
drop Событие происхоит, когда элемент перетаскивается, попадает (drop) в цель перетаскивания.
Изображение событий, происходящих в процессе перетаскивания (drag drop).
 
Свойство Описание
dataTransfer Возвращает данные, которые перетаскиваются
Смотрите простой пример:
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;
}

 
-
Например, пользователь перетаскивает файл на его компьютере, и располагает в элементе  <div>, вы можете прочитать базовую информацию и содержание файла, который пользователь переместил туда.
Когда происходит событие  drop, event.dataTransfer.files возвращает объект  FileList, данный объект содержит список объектов  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';
}