Справочники

HTML Элементы HTML Атрибуты Глобальные Атрибуты HTML События HTML MIME-типы HTML Коды языков HTMLТаблица цветов HTML ASCII HTML ISO-8859-1 HTML Windows-1251 HTML UTF-8 кирилица HTML URL для UTF-8 HTML URL для ISO-8859


 


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

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

Чтобы сделать элемент перетаскиваемым, нужно установить глобальный атрибут draggable. Ссылки и изображения возможно перетаскивать по умолчанию (без использования глобального атрибута draggable).

В HTML5 было добавлено семь атрибутов событий, которые используются на различных этапах операции перетаскивания:

  • События, происходящие с объектом перетаскивания:
    • ondragstart (срабатывает в начале операции перетаскивания элемента).
    • ondrag (срабатывает, когда элемент перетаскивается).
    • ondragend (срабатывает, когда пользователь закончил перетаскивание элемента).
  • События, происходящие с объектом на который перетаскивают:
    • ondragenter (когда элемент будет перенесен на заданную зону (цель для переноса)).
    • ondragover (срабатывает, когда элемент перемещают над допустимой зоной для переноса).
    • ondragleave (срабатывает, когда элемент выходит из допустимой зоны для переноса).
    • ondrop (срабатывает после того, как перетаскиваемый элемент опустился на объект перетаскивания).

При перетаскивании элемента, ondrag событие запускается каждые 350 миллисекунд.

Синтаксис

<элемент ondrag="скрипт">...</элемент>

Значения

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

Значение по умолчанию

Нет.

Применяется к тегам

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

Отличия HTML 4.01 от HTML 5

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

Пример использования:

Рассмотрим пример в котором элемент <p> можно перемещать между двумя блоками <div>. Установим четыре атрибута событий на блоки <div> и три на перемещаемый абзац <p>.

Когда мы начинаем перемещать элемент <p> срабатывает два события: первое срабатывает в начале операции перетаскивания элемента мышью (ondragstart), на которое мы установили скрипт, который позволяет хранить данные и их тип (метод setData), второе событие ondrag срабатывает в момент, когда началось перетаскивание и информирует нас об этом в элементе <p id = "demo"></p>.

По умолчанию элементы нельзя помещать в другие элементы. Чтобы это стало доступно (отмена действия браузера по умолчанию) мы используем метод preventDefault(), который срабатывает, когда элемент перемещают над допустимой зоной для переноса (атрибут событий ondragover).

Событие ondragenter) происходит, когда элемент будет перенесен на заданный обьект, при этом срабатывает скрипт, который устанавливает цвет заднего фона лайм и пунктирную границу красного цвета. Когда элемент покидает заданный обьект, значения стиля границы и заднего фона возвращаются в первоначальный вид (событие ondragleave).

В примере мы использовали еще два арибута событий: первый — ondrop, который срабатывает, когда элемент опустился на объект перетаскивания, при этом запускается скрипт, который позоляет получить данные (метод getData) и второй атрибут событий — ondragend, который срабатывает, когда перетаскивание элемента закончено и запускает скрипт, который информирует нас о завершении перетаскивания в элементе <p id = "demo"></p>.

Событие ondrag (элемент <p>)

Пример HTML:

Попробуй сам
<p draggable="true" ondrag="myFunction(event)">Перемести меня!</p>

Поддержка браузерами

Спецификации

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML 5.1 (W3C) Рекомендация

Учебник HTML

HTML уроки: HTML Атрибуты


Kwork.ru - услуги фрилансеров от 500 руб.