Перетащите и бросите, отбросив проблему JavaScript [закрыто] ⇐ Javascript

[Anonymous]

Я пытаюсь сделать коробку для выпадений, но я, кажется, только делает его перетаскиваемым и переставляю элементы. И поэтому я не могу иметь отдельный список для контейнеров1 для отказа от элементов из контейнеров.
const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.img-box')
const containers1 = document.querySelectorAll('.container1')

draggables.forEach(draggable => {
draggable.addEventListener('dragstart', () => {
draggable.classList.add('dragging')
})
draggable.addEventListener('dragend', () => {
draggable.classList.remove('dragging')
})
})

containers.forEach(container => {
container.addEventListener('dragover', e => {
e.preventDefault()
const afterElement = getDragAfterElement(container, e.clientY)
const draggable = document.querySelector('.dragging')
if (afterElement == null) {
container.appendChild(draggable)
} else {
container.insertBefore(draggable, afterElement)
}
})
})

containers1.forEach(container => {
containers1.addEventListener('dragover', function (e) {
e.preventDefault();
});
containers1.addEventListener("drop", function (e) {
e.appendChild(selected);
selected = null;
});
});

function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect()
const offset = y - box.top - box.height / 2
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child }
} else {
return closest
}
}, { offset: Number.NEGATIVE_INFINITY }).element
}
< /code>

• hello
  
  
  hello
  
  
  hello
  
  
  hello
  
  
  hello
  
  
  hello
  
  
  hello
  
  
  hello
  
  
  hello

Submit





< /code>
I attempted to make containers1 with a dropping attribute to drag and drop into it from containers.
containers1.forEach(container => {
containers1.addEventListener('dragover', function(e) {
e.preventDefault();
});
containers1.addEventListener("drop", function(e) {
e.appendChild(selected);
selected = null;
});
});


Подробнее здесь: https://stackoverflow.com/questions/796 ... javascript