betacode

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

1- DragEvent

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

dragenterDrop 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';
}
 
Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.