HTML5 Перетаскивание (Drag and Drop) — часть стандарта HTML5.

Перетаскивание (Drag and drop) — распространённая функция, которая заключается в захвате объекта и перетаскивании его в другое место.

будетexample.comперетаскивать значки в прямоугольную область.

Перетаскивание

Перетаскивание — распространённая функция, позволяющая захватывать объекты и перетаскивать их в другое место.

В HTML5 перетаскивание является стандартной функцией, позволяющей перетаскивать любой элемент.

Поддержка браузеров

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome и Safari поддерживают перетаскивание.

Примечание:Safari 5.1.2 не поддерживает перетаскивание.

Пример перетаскивания в HTML5

Следующий пример — простой пример перетаскивания:

Пример

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Пример учебного руководства (example.com)</title> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>Перетащите изображение example.com в прямоугольное поле:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>

Попробуйте »

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

Сделайте элемент перетаскиваемым

Сначала, чтобы сделать элемент перетаскиваемым, установите атрибут draggable в true:

<img draggable="true">

Что перетаскивать - ondragstart и setData()

Затем укажите, что происходит при перетаскивании элемента.

В приведённом выше примере атрибут ondragstart вызывает функцию drag(event), которая задаёт перетаскиваемые данные.

Метод dataTransfer.setData() задаёт тип данных и значение перетаскиваемых данных:

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

Text представляет тип данных, добавляемых к перетаскиваемому объекту. Значением является id перетаскиваемого элемента ("drag1").

Куда сбросить - ondragover

Событие ondragover указывает, куда следует поместить перетаскиваемые данные.

По умолчанию данные или элементы нельзя помещать внутрь других элементов. Чтобы разрешить размещение, необходимо предотвратить обработку элемента по умолчанию.

Это делается путем вызова метода event.preventDefault() события ondragover:

event.preventDefault()

Сброс - ondrop

Когда сбрасываются перетаскиваемые данные, возникает событие drop.

В приведенном выше примере атрибут ondrop вызывает функцию drop(event):

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

Пояснение к коду:

  • Вызов preventDefault() для предотвращения стандартной обработки данных браузером (поведение по умолчанию для события drop — открытие ссылки).
  • Использование метода dataTransfer.getData("Text") для получения перетаскиваемых данных. Этот метод возвращает любые данные того же типа, которые были заданы в методе setData().
  • Перетаскиваемые данные — это id перетаскиваемого элемента ("drag1").
  • Присоедините перетаскиваемый элемент к целевому элементу (цели сброса).

Examples

Другие примеры

Перетаскивание изображений туда и обратно
Как перетаскивать изображения между двумя элементами <div>.

Другие расширения