Drag & Drop как реализовать дроп для нескольких элементов

Question

есть массив элементов, но дроп принимает только один элемент, не могу додуматься как реализовать правильно для нескольких элементов

const items = document.querySelectorAll('.item');
const placeholders = document.querySelectorAll('.placeholder');

for(const placeholder of placeholders){
    placeholder.addEventListener('dragover', dragover);
    placeholder.addEventListener('dragenter', dragenter);
    placeholder.addEventListener('dragleave', dragleave);
    placeholder.addEventListener('drop', dragdrop);
}
for (const item of items) {
    item.addEventListener('dragstart', dragstart);
    item.addEventListener('dragend', dragend);
}


function dragstart(event) {
    event.target.classList.add('hold');
    setTimeout(() => event.target.classList.add('hide'), 0)
    
}

function dragend(event) {
    event.target.classList.remove('hold', 'hide');

}
function dragover(event) {
    event.preventDefault();
}
function dragenter(event) {
    event.target.classList.add('hovered');
    
}
function dragleave(event) {
    event.target.classList.remove('hovered');
    
}
function dragdrop(event) {
    event.target.classList.remove('hovered');
    event.target.append(item);
}

Answer 1

Вам осталось добавить элементам атрибут draggable и запомнить тот, который должен упасть в контейнер:

const items = document.querySelectorAll('.item');
const placeholders = document.querySelectorAll('.placeholder');
let dragged = null;

for (const placeholder of placeholders) {
  placeholder.addEventListener('dragover', dragover);
  placeholder.addEventListener('dragenter', dragenter);
  placeholder.addEventListener('dragleave', dragleave);
  placeholder.addEventListener('drop', dragdrop);
}

for (const item of items) {
  item.addEventListener('dragstart', dragstart);
  item.addEventListener('dragend', dragend);
}

function dragstart(event) {
  event.target.classList.add('hold');
  dragged = event.currentTarget;
}

function dragend(event) {
  event.target.classList.remove('hold', 'hide');
}

function dragover(event) {
  event.preventDefault();
}

function dragenter(event) {
  event.preventDefault();
  event.target.classList.add('hovered');
}

function dragleave(event) {
  event.target.classList.remove('hovered');
}

function dragdrop(event) {
  event.target.classList.remove('hovered');
  event.currentTarget.append(dragged);
}

.item,
.placeholder {
  box-sizing: border-box;
  max-width: 250px;
  min-height: 40px;
  margin: 5px;
}

.placeholder {
  display: flex;
  border: 2px solid green;
}

.item {
  border: 3px solid red;
  width: 40px;
}

.hold { background: orange; }
.hovered { background: yellow; }

<div class="placeholder">
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
</div>
<div class="placeholder"></div>
<div class="placeholder"></div>

БЛОГ НА HUSL

Drag & Drop как реализовать дроп для нескольких элементов

Ответы (1 шт):