Справочники

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 атрибут-событие ondragstart

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

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

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

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

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

Синтаксис

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

Значения

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

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

Нет.

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

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

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

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

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

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

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

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

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

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

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

Пример HTML:

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

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

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

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
Current W3C Draft Текущий проект

Учебник HTML

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


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