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

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

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

Все HTML теги.

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