Использование e.clientX и e.clientX для упорядочивания перетаскиваемых элементов по горизонтали и вертикали в одном конт ⇐ Javascript

[Anonymous]

Я провел весь вечер, пытаясь реализовать e.clientX, а также e.clientY в этом коде «перетаскивания».
Мои перетаскиваемые элементы добавляются горизонтально в высокий контейнер (groupPanel) и перейдет в следующую строку, как только будет использовано 100% ширины.
Приведенный ниже код работает только до тех пор, пока первый перетаскиваемый элемент не перейдет в следующую строку. Я пробовал работать с CSS (сеткой и флексбоксом), но ничего не добилось прежней функциональности.
Я переписал код, чтобы разместить дополнительные DIV-контейнеры в строках в качестве областей размещения элементов; это прекрасно работает, но на самом деле это не то, что мне нужно, так как я хочу потратить довольно много времени на разработку логики для наилучшего динамического использования пространства перед сворачиванием/перемещением.
У меня есть также попытался передать e.clientY в функцию getDragAfterElement и вычислил кратчайшее комбинированное смещение до ближайших перетаскиваемых элементов по вертикали и горизонтали, но позиции полученных afterElements не имели никакого смысла и мерцали при движении мыши.
Можно ли что-то сделать, чтобы оставить приведенный ниже тип кода, но чтобы он работал даже после того, как элементы перейдут в следующие строки?
Или мне следует отказаться от этого плана и использовать совершенно другой подход с полным контролем xy?
// Drag n Drop
function dragDropp() {
const draggables = document.querySelectorAll('.draggable')
const dragContainers = document.querySelectorAll('.groupPanel')

draggables.forEach(draggable => {
draggable.addEventListener('dragstart', () => {
draggable.classList.add('dragging');
})
draggable.addEventListener('dragend', () => {
draggable.classList.remove('dragging')
saveOrder()
})
})
dragContainers.forEach(groupPanel => {
groupPanel.addEventListener('dragover', e => {
e.preventDefault()
const afterElement = getDragAfterElement(groupPanel, e.clientX)
let draggable = document.querySelector('.dragging')

if (afterElement == null) {
groupPanel.appendChild(draggable)
} else {
groupPanel.insertBefore(draggable, afterElement)
}
})
})
}

function getDragAfterElement(container, x) {
const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];

return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = x - box.left - box.width / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... ally-and-v