Frontend Portal

Drag and Drop(потяни и брось) на JS



HTML:

<div class="box">

    <!-- по умолчанию draggable="true" -->

  <img class="image" src="img/gift.jpg">

</div>

<div class="box"></div>

JavaScript:

const boxes = document.querySelectorAll(".box"),

            image = document.querySelector(".image");



boxes.forEach(box => {

  box.addEventListener("dragover", (e) => {

    e.preventDefault();

  });

  box.addEventListener("drop", () => {

    box.appendChild(image);

  });

});

По умолчанию перемещаться могут только ссылки, изображения и выделенные фрагменты. Чтобы добавить возможность перетаскивания другим элементам, нужно задать атрибуту draggable значение true:

<div draggable="true">Draggable element</div>

👉 @FrontendPortal | #js