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

DragEvent

1. DragEvent

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

DragEvent это подинтерфейс MouseEvent, поэтому он наследует все свойства (property) и методы у MouseEvent.

Ниже является список видов событий, которые происходят в процессе перетаскивания.

Событие	Вид элемента	Описание
dragstart	Dragged Element	Событие происхоит, когда пользователь начинает перетаскивать элемент.
drag	Dragged Element	Событие происхоит, когда перетаскивается элемент.
dragend	Dragged Element	Событие происхоит, когда пользователь завершает перетаскивание элемента.

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

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

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

1. DragEvent

Pуководства ECMAScript, Javascript

Pуководства ECMAScript, Javascript

Новейшие статьи