HTML атрибут событий ondrophtml5

Атрибуты событий

Значение и применение

Атрибут событий ondrop позволяет задать срабатывание скрипта после того, как перетаскиваемый элемент опустился на объект перетаскивания.

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

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

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

Атрибут событийChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
ondrophtml54.03.512.06.09.012.0

Синтаксис

<element ondrop = "script" >

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Атрибуты событий мыши. Drag and drop.</title>
<style> 
.divdrop {
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) {
	ev.dataTransfer.setData("Text", ev.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

Атрибут событий ondrophtml5 является новым в HTML5.

Поддерживаемые теги

Все HTML теги.

Атрибуты событий