Draggable, Sortable & Tabs: Getting Draggables onto a Sortable when Tab is activated

Draggable, Sortable & Tabs: Getting Draggables onto a Sortable when Tab is activated

Basically I have two Draggables: Tab One Elements, Tab Two Elements
I also have two Sortables: Tab One Display, Tab Two Display

The initial Tab One combination works fine but when Tab Two is activated, along with Tab Two Elements, the elements are Draggable but not received by the associated Sortable.

Here's the Demo:
Draggable, Sortable, Tabs: Broken Demo

Here's the Script:
  1. $(document).ready(function() {
  2. /*  */
  3.     function contentPaneTabs(wrapper, tabs, pane) {
  4.     var panes = wrapper + " > " + pane;
  5.     $(panes).hide();
  6.     $(tabs + " li:first").addClass("active").show(); //Activate first tab
  7.     $(panes + ":first").show(); //Show first tab content
  8.     $('#detail-element-pane').hide();
  9.     //On Click Event
  10.     $(tabs + " li").click(function() {
  11.         $(tabs + " li").removeClass("active"); //Remove any "active" class
  12.         $(this).addClass("active"); //Add "active" class to selected tab
  13.         $(panes).hide(); //Hide all tab content
  14.         var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
  15.         if (activeTab == '#item-pane') {$('#detail-element-pane').hide();$('#item-element-pane').show();itemContentPane();}
  16.         else if (activeTab == '#detail-pane') {$('#item-element-pane').hide();$('#detail-element-pane').show();detailContentPane();}
  17.         $(activeTab).fadeIn(); //Fade in the active ID content
  18.         return false;
  19.     });
  20. }
  21. function itemContentPane() {
  22.     //Generate IDs for each available content element
  23.     var autoElementId = 0;
  24.     $('#item-element-pane .elem-drag').each(function(intIndex) {$(this).attr('id', "element" + intIndex);});
  25.     $("#item-content-list").sortable({
  26.         receive: function(e,ui) {
  27.             var disableThis = '#item-element-pane #' + $(ui.item).attr('id');
  28.             $(disableThis).addClass('disabled').draggable( "option", "disabled", true );
  29.             var elementCount = $('#item-content-list > .elem-drag').size();
  30.             if (elementCount > 0) {$('#item-pane .drag-note').addClass('bottom');}
  31.             else if (elementCount <= 0) {$('#item-pane drag-note.bottom').removeClass('bottom');}
  32.             }
  33.         ,update: function() {var order = $('#item-content-list').sortable('serialize');}
  34.      });
  35. }
  36. function detailContentPane() {
  37.     var autoElementId = 0;
  38.      $('#detail-element-pane .elem-drag').each(function(intIndex) {$(this).attr('id', "element" + intIndex);});
  39.      $("#detail-content-list").sortable({
  40.         receive: function(e,ui) {
  41.             var disableThis = '#detail-element-pane #' + $(ui.item).attr('id');
  42.             $(disableThis).addClass('disabled').draggable( "option", "disabled", true );
  43.             var elementCount = $('#detail-content-list  .elem-drag').size();
  44.             if (elementCount > 0) {$('#detail-pane .drag-note').addClass('bottom');}
  45.             else if (elementCount <= 0) {$('#detail-pane drag-note.bottom').removeClass('bottom');}
  46.             }
  47.         ,update: function() {var order = $('#detail-content-list').sortable('serialize');}
  48.      });
  49.      $('.drag-note').sortable({ disable:true });
  50.      
  51. }
  52. function itemElementPane() {
  53.     $("#item-element-pane .elem-drag").draggable({
  54.     connectToSortable: '#item-content-list'
  55.     , snap: '#item-content-list'
  56.     , snapMode: 'inner'
  57.     , snapTolerance: 25
  58.     , opacity: 0.7
  59.     , helper: 'clone'
  60.     , revert: 'invalid'
  61.     });
  62.  }
  63. function detailElementPane() { 
  64.     $("#detail-element-pane .elem-drag").draggable({
  65.     connectToSortable: '#detail-content-list'
  66.     , snap: '#detail-content-list'
  67.     , snapMode: 'inner'
  68.     , snapTolerance: 25
  69.     , opacity: 0.7
  70.     , helper: 'clone'
  71.     , revert: 'invalid'
  72.     });
  73.  }
  74.  
  75.  function trashElements() {
  76.     $('.trash').droppable({ drop: function(ev,ui) { $(ui.draggable).remove();
  77.      } });
  78. }
  79.     contentPaneTabs('#build-pane', '#content-pane-tabs', '.drop-pane');
  80.     itemContentPane();
  81.     detailContentPane();
  82.     itemElementPane();
  83.     detailElementPane();
  84.     trashElements();
  85.    
  86. });

Here's the Markup:
  1. <div style="width:960px;margin:30px auto;">
  2. <!- ### ITEM ELEMENT PANE -->
  3.                     <div id="item-element-pane"  class="element-pane">
  4.                         <h2>Tab One - Elements</h2>
  5.                         <!-- ## CONTENT ELEMENTS -->
  6.                         <div id="content-elements"  class="group">
  7.                             <h3>Draggable Elements</h3>
  8.                             <div class="elements">
  9.                                 <div class="elem-drag"><a id="ctl00_ctl00_Content_Content_Content_Title" >Element - One</a></div>
  10.                                 <div class="elem-drag"><a id="ctl00_ctl00_Content_Content_Content_Item" >Element - Two</a> </div>
  11.                                 <div class="elem-drag"><a id="ctl00_ctl00_Content_Content_Content_Image" >Element - Three</a></div>
  12.                             </div>
  13.                         </div>
  14.                     </div>
  15.                     <!-- /# ITEM ELEMENT PANE -->
  16.                     <!- ### DETAIL ELEMENT PANE -->
  17.                     <div id="detail-element-pane" class="element-pane">
  18.                         <h2>Tab Two - Elements</h2>
  19.                        
  20.                        
  21.                        
  22.                         <!-- ## CONTENT ELEMENTS -->
  23.                         <div id="content-elements"  class="group">
  24.                             <h3>Draggable Elements</h3>
  25.                             <div class="elements">
  26.                                 <div class="elem-drag"><a id="ctl00_ctl00_Content_Content_Content_Title" >Element - One</a></div>
  27.                                 <div class="elem-drag"><a id="ctl00_ctl00_Content_Content_Content_Item" >Element - Two</a> </div>
  28.                                 <div class="elem-drag"><a id="ctl00_ctl00_Content_Content_Content_Image" >Element - Three</a></div>
  29.                             </div>
  30.                         </div>
  31.                        
  32.                     </div>
  33.                     <!-- /# DETAIL ELEMENT PANE -->
  34.                     <!-- ### BUILD PANE -->
  35.                     <div id="build-pane" class="show-list">
  36.                         <h2 class="label-pane">Sortable Lists</h2>
  37.                         <!-- ## PANE TABS -->
  38.                         <ul id="content-pane-tabs">
  39.                             <li class="choose-list"><a href='#item-pane'>Tab - One - Display</a> </li>
  40.                             <li class="choose-detail"><a href='#detail-pane'>Tab - Two - Display</a> </li>
  41.    
  42.                            
  43.                         </ul>
  44.                         <!-- ## ITEM LIST PANE -->
  45.                         <div id="item-pane" class="drop-pane" >
  46.                             <div id="item-content-list" class="content-element-list"><!-- //// Drop Zone --></div>
  47.                             <div class="drag-note">Drag an Element Here to Add</div>
  48.                             <div class="trash">Drag an Element Here to Delete</div>
  49.                            
  50.                         </div>
  51.                         <!-- ## DETAIL LIST PANE -->
  52.                         <div id="detail-pane" class="drop-pane" >
  53.                             <div id="item-content-list" class="content-element-list"><!-- //// Drop Zone --></div>
  54.                             <div class="drag-note">Drag an Element Here to Add</div>
  55.                             <div class="trash">Drag an Element Here to Delete</div>
  56.                         </div>
  57.                         <!-- ### FORM CONTROLS -->
  58.                         <div class="content-pane-buttons">
  59.                             <input name="ClearButton" value="Clear"  id="ClearButton" type="submit" />
  60.                             <input name="CommitButton" value="Commit Changes" id="CommitButton" type="submit" />
  61.                         </div>
  62.                     </div>
  63.                     <!-- /# BUILD PANE -->
  64.            
  65. </div>


Thanks for having a look