title: Behaviors of JQuery sortable and draggable
body: <p>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. </p>
  
  <p>Here is the demo: <a href="https://jsfiddle.net/tblaziken/a2qbnygb/1/" rel="nofollow">https://jsfiddle.net/tblaziken/a2qbnygb/1/</a></p>
  
  <p>The javascript so far:</p>
  
  <pre><code>$('.ui-select .ui-select-item').draggable({
      revert : "invalid",
      helper: 'clone',
      connectToSortable : '.ui-sortable'
  });
  
  $( ".ui-sortable" ).sortable({
      connectWith: '.ui-sortable',
      placeholder: 'ui-hovering'
  });
  </code></pre>
  
  <p>The problem is I can only add or move new object into <code>ui-main</code> and 2 existed <code>ui-container</code> objects, but unable to do so with newly created <code>ui-container</code>. What makes the existed and newly created ones different and how to fix it? </p>