Drag&Drop только в определенную область

Question

Использую Drag&Drop от Jquery.

Нужно сделать перетягивание из одной колонки в другую.

Сделал вот так:

Блок колонки:

$(wrap).droppable({
    drop: function (event, ui) {
        let dragItem = $(event.originalEvent.target).closest('.component-card-task')[0];

        if (n(dragItem.dataset.statusId) === options.status.id) {
            dragItem.style.inset = 'auto auto auto auto';
            dragItem.style.height = 'unset';
            return;
        }
        try {
            event.target.appendChild(dragItem);
            dragItem.style.inset = 'auto auto auto auto';
            dragItem.style.height = 'unset';
            dragItem.setAttribute('data-status-id', options.status.id);
        } 
        catch (e) {
            $(dragItem).draggable({
                containment: '.tasks-board-view-drag',
                revert: 'invalid'
            })
        }

        return !event;
    }
});

Ячейка:

$(wrap).draggable({
    containment: '.tasks-board-view-drag, :not(.component-card-task)',
    revert: 'invalid'
});

tasks-board-view-drag - общий контейнер

Вроде все работает, но иногда возникает вот такой баг: Я каким-то образом могу перетянуть блок в ту же область, хотя стоит исключение. Иногда исключение работает, иногда нет. Что я делаю не так?

Answer 1

Ошибка была в callback функции drop. Неправильно определялся перетаскиваемый элемент:

drop: function (event, ui) {
        if (n(ui.draggable[0].dataset.statusId) === options.status.id) {
            ui.draggable[0].style.inset = 'auto auto auto auto';
            ui.draggable[0].style.height = 'unset';
            return !event;
        }
        try {
            event.target.appendChild(ui.draggable[0]);
            ui.draggable[0].style.inset = 'auto auto auto auto';
            ui.draggable[0].style.height = 'unset';
            ui.draggable[0].setAttribute('data-status-id', options.status.id);
        }
        catch (e) {
            $(ui.draggable[0]).draggable({
                containment: '.tasks-board-view-drag, :not(.component-card-task)',
                revert: 'invalid'
            });
        }

        return !event;
    }

БЛОГ НА HUSL

Drag&Drop только в определенную область

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