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

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

Атрибут событий ondragend позволяет задать срабатывание скрипта, когда пользователь закончил перетаскивание элемента (после операции перетаскивания).

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

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

События, происходящие с объектом перетаскивания:

ondragstart (срабатывает в начале операции перетаскивания элемента).
ondrag (срабатывает, когда элемент перетаскивается).
ondragend (срабатывает, когда пользователь закончил перетаскивание элемента).

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

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

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

Атрибут событий	Chrome	Firefox	Opera	Safari	IExplorer	Edge
ondragend	4.0	3.5	12.0	6.0	9.0	12.0

Синтаксис

<element ondragend = "script" >

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

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

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

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

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

В примере используются еще два арибута событий: первый - ondrop html5 , который срабатывает, когда элемент опустился на объект перетаскивания, при этом запускается скрипт, который позоляет получить данные (метод getData) и второй атрибут событий - ondragend html5 , который срабатывает, когда пользователь закончил перетаскивание элемента и запускает скрипт, который информирует нас о завершении процедуры перетаскивания в элементе <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

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

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

Все HTML теги.

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