Поведение JQuery, сортируемое и перетаскиваемое

Question

У меня есть два объекта «перетаскиваемые объекты» и «контейнер» и сортируемый объект «ui-main». То, что я хочу сделать, - перетащить 2 объекта над «ui-main», а также добавить объекты в «контейнер», создав вложенную сортируемую форму.

Вот демо: https://jsfiddle.net/tblaziken/a2qbnygb/1/

Javascript до сих пор:

$('.ui-select .ui-select-item').draggable({ 
    revert : "invalid", 
    helper: 'clone', 
    connectToSortable : '.ui-sortable' 
}); 

$(".ui-sortable").sortable({ 
    connectWith: '.ui-sortable', 
    placeholder: 'ui-hovering' 
}); 

Проблема в том, что я могу только добавить или переместить новый объект в ui-main и 2 существовали ui-container объекты, но не в состоянии сделать это с вновь созданным ui-container. Что делает существующие и вновь созданные разные и как их исправить?

Answer 1

Для меня все в вашем jsfiddle работает так, как ожидалось. Однако вы используете вспомогательный клон, который не дает вам полного контроля над тем, что происходит, когда вы клонируете. Функция clone() jQuery ожидает 2 параметра.

.clone([withDataAndEvents ] [, deepWithDataAndEvents ]) 

Так, чтобы иметь одни и те же события на каждом элементе вы либо клонировать их самостоятельно, устанавливая как Params истинно, или вы свяжете/отвязать события снова к каждому вновь добавленного объекта.