Сделайте контейнер сортируемым и удаляемым jQuery ⇐ Jquery

[Anonymous]

У меня есть контейнер, и я использую пользовательский интерфейс jQuery для включения функций перетаскивания и сортировки.
Мне нужны как сортируемые, так и отбрасываемые функции одновременно, но у меня возникли некоторые проблемы. Как только я делаю отбрасываемый контейнер сортируемым, его функции не работают должным образом.
Я пробовал подключиться к Sortable для перетаскиваемых элементов и ConnectWith к сортируемому контейнеру .
Оба варианта не дали ожидаемых результатов.
Вот HTML

Код: Выделить всё

moveUp
moveDown
moveRight
moveLeft
for

Вот JavaScript

Код: Выделить всё

  $('#blocks-editor .object').draggable({
helper: 'clone',
containment: '#blocks-editor',
revert: 'invalid',
scroll: true,
});

$('#blocks-editor .popup').draggable({
helper: 'clone',
containment: '#blocks-editor',
revert: 'invalid',
scroll: true,
});

$('#blocks-editor .popup').droppable({
activeClass: 'ui-state-default',
helper: 'clone',
accept: '.object',
greedy: true,
drop(event, ui) {
$(ui.draggable).addClass('insidePopup');
ui.draggable.appendTo($(this));
},
});

$('#blocks-editor').droppable({
helper: 'clone',
greedy: true,
drop(event, ui) {
ui.draggable.appendTo($(this));
$(ui.draggable).removeClass('insidePopup');
},
});

Вот ссылка на Codepen, демонстрирующая приведенный выше код — https://codepen.io/saidarshan/pen/PogqQQm
Ожидаемый результат должен быть таким же, как приведенный рабочий пример, за исключением того, что он должен быть сортируемым.

Подробнее здесь: https://stackoverflow.com/questions/781 ... ble-jquery