<!DOCTYPE HTML>
<html>
<style>
.droptarget {
  width: 100px; 
  height: 30px;
  padding: 5px;
  border: 1px solid black;
}
</style>

<body>

<h1>HTML DOM События</h1>
<h2>Все события ondrag</h2>

<p>Перетащите текст вверх и вниз между двумя прямоугольниками.</p>

document.addEventListener("dragstart", function(event) {
  // Метод dataTransfer.setData() устанавливает тип данных и значение перетаскиваемых данных.
  event.dataTransfer.setData("Text", event.target.id);
  
  // Вывод текста при начале перетаскивания элемента p
  document.getElementById("demo").innerHTML = "Начал перетаскивать элемент p.";
  
  // Изменить непрозрачность перетаскиваемого элемента
  event.target.style.opacity = "0.4";
});

// Перетаскивая элемент p, измените цвет выводимого текста.
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});

// Перетаскивая элемент p, измените цвет выводимого текста.
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Перетаскивание элемента p завершено.";
  event.target.style.opacity = "1";
});

/* События, запущенные при сбросе цели */

// Когда перетаскиваемый элемент p попадает в droptarget, измените стиль границы DIVS
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});

// По умолчанию данные/элементы не могут быть удалены в других элементах. Чтобы разрешить удаление, мы должны предотвратить обработку элемента по умолчанию
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});

// Когда перетаскиваемый элемент p покидает droptarget, сбрасывается стиль границы DIVS
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});

/* При перетаскивании — запретить браузеру обрабатывать данные по умолчанию (по умолчанию открывается как ссылка при перетаскивании)
   Сбросить цвет выходного текста и цвет границы DIV
   Получить перетаскиваемые данные с помощью метода dataTransfer.getData()
   Перетаскиваемые данные — это идентификатор перетаскиваемого элемента ("drag1")
   Добавить перетаскиваемый элемент в элемент перетаскивания
*/
document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( event.target.className == "droptarget" ) {
    document.getElementById("demo").style.color = "";
    event.target.style.border = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
});
</script>

</body>
</html>

Сообщить об ошибке: