Drag and Drop JS - Easy and Simple Ways to Add Drag and Drop Functionality to Your Website

Drag and drop (DnD) в JavaScript относится к пользовательскому интерфейсу, который позволяет пользователям перемещать элементы (обычно изображения, текст или файлы) на странице, используя мышь. Данный функционал может быть реализован с помощью встроенных событий в браузере: dragstart, dragenter, dragleave, dragover, drop, dragend.

Пример кода, реализующего DnD:

html
    
Drop image here
    

В данном примере создается область «dropzone», в которую можно бросить картинку «drag1». У картинки включен атрибут draggable, который позволяет ее перемещать. При перемещении картинки на область dropzone срабатывает событие ondragover, которое указывает, что область может принять брошенный элемент. Затем событие ondrop может быть использовано для обработки броска:

javascript
function allowDrop(event) {
  event.preventDefault();
}
function drag(event) {
  event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data));
}

Функция allowDrop () вызывается при перемещении элемента на область dropzone, чтобы предотвратить браузер от перенаправления на другую страницу. Функция drag () устанавливает тип передаваемых данных (text) и значение, которое будет использоваться при перетаскивании (id картинки). При обработке события ondrop, функция drop () определяет значения типа данных и идентификатора в переданных данных и перемещает элемент (картинку) в верхний уровень dropzone контейнера.

Также стоит отметить, что существует множество библиотек и фреймворков, которые позволяют реализовывать DnD с более высокой абстракцией и удобством для разработчика. Например, существует библиотека Dragula, которая упрощает DnD для списков и таблиц, или Drag and Drop API библиотека, которая предоставляет более широкие возможности для создания кастомных DnD интерфейсов.