Проблема с перетаскиванием элементов между контейнерами на JavaScript

Оффтоп javascript
1

Я разрабатываю функцию для перетаскивания элементов, но столкнулся с затруднением. Элементы корректно перетаскиваются и меняются местами в одном списке, но не удается создать отдельную зону для сброса элементов из основного контейнера.

const перемещаемыеЭлементы = document.querySelectorAll('.перемещаемый')
const исходныеКонтейнеры = document.querySelectorAll('.ящик-элементов')
const зоныСброса = document.querySelectorAll('.зона-сброса')

перемещаемыеЭлементы.forEach(элемент => { 
    элемент.addEventListener('dragstart', () => { 
        элемент.classList.add('перетаскиваемый')
    })
    элемент.addEventListener('dragend', () => {
        элемент.classList.remove('перетаскиваемый')
    })
})

исходныеКонтейнеры.forEach(контейнер => { 
    контейнер.addEventListener('dragover', e => {
        e.preventDefault()
        const следующийЭлемент = получитьПозициюДляВставки(контейнер, e.clientY)
        const перетаскиваемыйЭлемент = document.querySelector('.перетаскиваемый')
        if (следующийЭлемент == null) {
            контейнер.appendChild(перетаскиваемыйЭлемент)
        } else {
            контейнер.insertBefore(перетаскиваемыйЭлемент, следующийЭлемент)
        }
    })
})

зоныСброса.forEach(зона => {
    зоныСброса.addEventListener('dragover', function (e) {
        e.preventDefault();
    });
    зоныСброса.addEventListener("drop", function (e) {
        e.appendChild(текущийЭлемент);
        текущийЭлемент = null;
    });
});

function получитьПозициюДляВставки(обертка, yPos) {
    const доступныеЭлементы = [...обертка.querySelectorAll('.перемещаемый:not(.перетаскиваемый)')]
    return доступныеЭлементы.reduce((ближайший, элемент) => {
        const прямоугольник = элемент.getBoundingClientRect()
        const расстояние = yPos - прямоугольник.top - прямоугольник.height / 2
        if (расстояние < 0 && расстояние > ближайший.расстояние) {
            return { расстояние: расстояние, элемент: элемент }
        } else {
            return ближайший
        }
    }, { расстояние: Number.NEGATIVE_INFINITY }).element
}

<body>
    <div class="основной-обертка">
        <div class="исходная-панель">
            <div class="контейнер-элементов">
                <div class="мех-область" data-scroll="true">
                    <ul class="список-элементов scroll-content">
                        <div class="ящик-элементов">
                            <div class="перемещаемый" draggable="true">элемент</div>
                        </div>
                        <div class="ящик-элементов">
                            <div class="перемещаемый" draggable="true">элемент</div>
                        </div>
                        <div class="ящик-элементов">
                            <div class="перемещаемый" draggable="true">элемент</div>
                        </div>
                    </ul>
                </div>
            </div>
        </div>

        <div class="целевой-панель">
            <div class="зона-сброса"></div>
            <div class="управление">
                <button class="кнопка-отправить">
                    Отправить
                </button>
            </div>
        </div>
    </div>
</body>

Я пытался добавить обработчики для зоны сброса, но что-то идет не так. Можете подсказать, в чем проблема в коде?

2

Твой код работает только внутри одного контейнера, потому что dragover постоянно срабатывает и сразу переставляет элемент. Для зон сброса убери appendChild/insertBefore из dragover и делай это только в drop. Иначе элемент сразу прыгает обратно при наведении. Какой эффект при сбросе ты хочешь?

3

Проблема в том, что ты смешал логику для обычных контейнеров и зон сброса. В обычных контейнерах делаешь appendChild прямо в dragover, а для зон сброса пытаешься в drop - они конфликтуют.

Вынеси переменную наверх: let перетаскиваемыйЭлемент = null и устанавливай её в dragstart. В зонах сброса используй эту переменную вместо несуществующей текущийЭлемент.

И исправь зоныСброса.addEventListener на зона.addEventListener - сейчас обработчики для зон сброса вообще не работают.

4

В коде с зонами сброса несколько багов. Первый - в forEach ты пишешь зоныСброса.addEventListener вместо зона.addEventListener, поэтому обработчики не цепляются. Второй - текущийЭлемент не объявлена, нужно document.querySelector('.перетаскиваемый'). В drop событии должно быть зона.appendChild, а не e.appendChild. И добавь dragenter с e.preventDefault() для зон сброса - без него иногда глючит.