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

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

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

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

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

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

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

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

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

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

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

Синтаксис

<element ondrop = "script" >

<!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

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

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

Все HTML теги.

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