HTML атрибут событий ondragstart
Атрибуты событийЗначение и применение
Атрибут событий ondragstart позволяет задать срабатывание скрипта, когда пользователь начинает перетаскивать элемент.
Чтобы сделать элемент перетаскиваемым, используется глобальный атрибут draggable . Ссылки и изображения возможно перетаскивать по умолчанию (без использования глобального атрибута draggable ).
В HTML5 было добавлено семь атрибутов событий, которые используются на различных этапах операции перетаскивания:
- События, происходящие с объектом перетаскивания:
- ondragstart (срабатывает в начале операции перетаскивания элемента).
- ondrag (срабатывает, когда элемент перетаскивается).
- ondragend (срабатывает, когда пользователь закончил перетаскивание элемента).
- События, происходящие с объектом на который перетаскивают:
- ondragenter (когда элемент будет перенесен на заданную зону (цель для переноса)).
- ondragover (срабатывает, когда элемент перемещают над допустимой зоной для переноса).
- ondragleave (срабатывает, когда элемент выходит из допустимой зоны для переноса).
- ondrop (срабатывает после того, как перетаскиваемый элемент опустился на объект перетаскивания).
Поддержка браузерами
Атрибут событий | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|
ondragstart | 4.0 | 3.5 | 12.0 | 6.0 | 9.0 | 12.0 |
Синтаксис
<element ondragstart = "script" >
Пример использования
Рассмотрим пример в котором элемент <p> можно перемещать между двумя блоками <div>. Для этого мы установим четыре атрибута событий на блоки <div> и три на перемещаемый параграф <p>.
Когда мы начинаем перемещать элемент <p> срабатывает два события: первое срабатывает в начале операции перетаскивания элемента мышью (ondragstart), на которое мы установили скрипт, который позволяет хранить данные и их тип (метод setData), второе событие ondrag срабатывает в момент, когда началось перетаскивание и информирует нас об этом в элементе <p id = "info"></p>.
По умолчанию элементы не могут быть помещены в другие элементы. Чтобы это стало доступно (отмена действия браузера по умолчанию) мы используем метод preventDefault(), который срабатывает, когда элемент перемещают над допустимой зоной для переноса (атрибут событий ondragover).
Событие ondragenter) происходит, когда элемент будет перенесен на заданную зону, при этом срабатывает скрипт, который устанавливает цвет заднего фона желтый и пунктирную границу черного цвета. Когда элемент покидает заданную зону, значения стиля границы и заднего фона возвращаются в первоначальный вид (событие ondragleave) .
В примере используются еще два арибута событий: первый - ondrop, который срабатывает, когда элемент опустился на объект перетаскивания, при этом запускается скрипт, который позоляет получить данные (метод getData) и второй атрибут событий - ondragend, который срабатывает, когда пользователь закончил перетаскивание элемента и запускает скрипт, который информирует нас о завершении процедуры перетаскивания в элементе <p id = "info"></p>.
<!DOCTYPE html> <html> <head> <title>Атрибуты событий мыши. Drag and drop.</title> <style> .dragndrop { width: 200px; /* устанавливаем ширину блока */ height: 100px; /* устанавливаем высоту блока */ border: 3px solid orange; /* задаём сплошную границу шириной 3px оранжевого цвета */ padding: 30px; /* устанавливаем внутренние отступы элемента со всех сторон */ text-align: center; /* устанавливаем выравнивание текста по центру */ background: cornsilk; /* задаём цвет заднего фона */ float: left; /* блок становится плавающим элементом, смещенным влево */ margin-right: 20px; /* устанавливает величину отступа от правого края элемента */ } </style> </head> <body> <p>Переместите HTML элемент <p> между двумя прямоугольниками:</p> <div class = "dragndrop" ondragenter = "dragEnter(event)" ondragleave = "dragLeave(event)" ondrop = "drop(event)" ondragover = "allowDrop(event)"> <p ondragstart = "dragStart(event)" ondrag = "dragging(event)"ondragend = "dragEnd(event)" draggable = "true" id ="anyid">Перемести меня!</p> </div> <div class = "dragndrop" ondragenter = "dragEnter(event)" ondragleave = "dragLeave(event)" ondrop = "drop(event)" ondragover = "allowDrop(event)"></div> <p id = "info"></p> <script> function dragStart( event ) { event.dataTransfer.setData("Text", event.target.id); // используется для хранения данных, перетаскиваемых мышью во время операции drag and drop. } function dragging( event ) { document.getElementById("info").innerHTML = "Элемент <p> перетаскивается (ondrag)"; } function allowDrop( event ) { event.preventDefault(); // отмена действия браузера по умолчанию (через событие ondragover) } function dragEnter( event ) { if ( event.target.className == "dragndrop" ) { // изменение цвета границы и заднего фона event.target.style.background = "yellow"; event.target.style.border = "3px dotted black"; } } function dragLeave( event ) { if ( event.target.className == "dragndrop" ) { // значения стиля границы и заднего фона возвращаются в первоначальный вид event.target.style.background = ""; event.target.style.border = ""; } } function drop( event ) { var data = event.dataTransfer.getData("Text"); // позволяет получить данные. event.target.appendChild( document.getElementById( data ));// добавляем перетаскиваемый элемент } function dragEnd( event ) { document.getElementById("info").innerHTML = "Перетаскиваемый элемент <p> опустился на объект перетаскивания (ondragend)" ; } </script> </body> </html>
Переместите HTML элемент <p> между двумя прямоугольниками:
Перемести меня!
Отличия HTML 4.01 от HTML 5
Атрибут событий ondragstart является новым в HTML5.
Поддерживаемые теги
Все HTML теги.
Атрибуты событий