HTML атрибут-событие ondrag

Событие ondrag возникает, когда пользователь перетаскивает элемент или выделенный текст.

Перетаскивание объекта (drag-and-drop) довольно обычная функция в HTML5. Это когда пользователь "берет" мышью некий объект и перемещает его в другое место.

Чтобы сделать элемент перетаскиваемым, нужно установить атрибут draggable.

Ссылки и изображения являются перетаскиваемыми по умолчанию и не требуют установки атрибута draggable.

Существует множество событий, которые возникают на различных стадиях операции перетаскивания. И соответственно для них существуют соответствующие атрибуты:

События, возникающие в перемещаемом объекте (исходный элемент):

  • ondragstart – возникает, когда пользователь начинает перемещать элемент
  • ondrag – возникает во время перемещения элемента
  • ondragend - возникает, когда пользователь заканчивает перемещать элемент

События, возникающие в объекте-приемнике:

  • ondragenter - возникает, когда перемещаемый элемент входит в принимающий объект
  • ondragover - возникает, когда перемещаемый элемент проходит над принимающим объектом
  • ondragleave - возникает, когда перемещаемый элемент покидает принимающий объект
  • ondrop - возникает, когда пользователь отпускает перемещаемый элемент

Во время операции перемещения событие ondrag возникает каждые 350 мс.

Атрибут ondrag был добавлен в HTML5.

Особенности
Поддерживаются все HTML теги.

Синтаксис атрибута

<element ondrag="script">

Значения атрибута

ЗначениеОписание
scriptСкрипт, исполняющийся при возникновении события

Пример использования атрибута

Запускает скрипт, если пользователь перетащит элемент <p>:


<p draggable="true" ondrag="myFunction(event)">Перетащи меня!</p>