Behaviors of JQuery sortable and draggable

Question

I have 2 draggable objects 'field' and 'container' and a sortable object 'ui-main'. What I want to do is to drag 2 above objects into 'ui-main', and also allow to add objects into 'container', creating a nested sortable form.

Here is the demo: https://jsfiddle.net/tblaziken/a2qbnygb/1/

The javascript so far:

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

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

The problem is I can only add or move new object into ui-main and 2 existed ui-container objects, but unable to do so with newly created ui-container. What makes the existed and newly created ones different and how to fix it?

Answer 1

For me everything in your jsfiddle works as expected. However, you use the clone helper, which does not give you full control over what happens when you clone. jQuery's clone() function expects 2 parameters.

.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

So to have the same events on every element you either clone them yourself, setting both params to true, or you bind/unbind the events again to every newly added object.