Атрибут draggable

https://yocton.ru/html-elements/global-attributes/draggable

by yocton

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Общий параметр draggable</title>
  </head>
  <body>
    <p>Распределите цвета в соответствии с флагом РФ.</p>
    <div id="flag"> </div>
    <br>
    <div class="box" id="red" draggable="true"></div>
    <div class="box" id="white" draggable="true"></div>
    <div class="box" id="blue" draggable="true"></div>
  </body>
</html>

CSS

div {
  padding: 0;
  margin: 0
}
#flag {
  width: 102px;
  height: 66px;
  background: #eee;
  display: flex;
  flex-direction: column;
}
.box {
  width: 100px;
  height: 20px;
  border: 1px solid black;
}
#red {background: red;}
#white {background: white;}
#blue {background: blue;}

JavaScript

flag.ondrop = function(e) {
  var data = e.dataTransfer.getData("text/html");
  flag.appendChild(document.getElementById(data));
}
flag.ondragover = function(e) {
  e.preventDefault();
};
//Вешаем обработчик события ondragstart на все элементы с классом box
[].forEach.call(document.querySelectorAll('.box'), function(box) {
  box.ondragstart = function(e) {
    e.dataTransfer.setData("text/html", e.target.id);
  }
});