Combinate JQuery UI sortable and draggable with Bootstrap Tab navigation - jquery-ui

Question

I try build page based on Bootstrap with JQuery UI sortable list.
I have one list in global space and two lists in Tabs
and I like to drag items from external list and drop it to tab navigation for adding into list
However when I switch to bootstrap tab navigation the external item on drop disappear but doesn't appear in tab list
this is my example based on JQ UI "Connect list with Tab"
This is my JS FIDDLE
$(function() {
$( "#sortable0, #sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" );//.tabs();
$('#myTab a:last').tab('show');
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide( "slow", function() {
$tabs.tabs( "option", "active", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "slow" );
});
}
});
});
HTML
<div id="external-tab">
<ul id="sortable0" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">ExItem 1</li>
<li class="ui-state-default">ExItem 2</li>
<li class="ui-state-default">ExItem 3</li>
</ul>
</div>
<div id="tabs" class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
</ul>
<div class="tab-content">
<div id="tabs-1" class="tab-pane">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
</ul>
</div>
<div id="tabs-2" class="tab-pane">
<ul id="sortable2" class="connectedSortable ui-helper-reset">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
</ul>
</div>
</div>
</div>

Answer 1

It's a shame nobody else got to your question in the past year... I'm guessing this is no longer relevant for you personally, but maybe we can help to resolve this issue for any other user searching on Google for solutions to include jQuery UI's API for Draggable/Droppable items, integrated with Bootstrap's tabbed component.
If I'm reading your question correctly, you'd like to be able to drag items from the external list into either of the two tabs. If your problem is similar to the one I'm personally tackling at the moment, you might also want to drag items from tab one into tab two, and vice-versa. I've updated your fiddle with a solution that accommodates both of these needs. The lists are also sortable, as they were previously, and the classes of items dragged from one space to the other are retained as well.
Items I might consider adding in the future are:
The ability to drag not only onto the tab, but also the space below it
Adding all attributes from the parent element dragged, not just the class list
However, for the moment, all I've done is to rectify the solution you posted.
The updated fiddle is here: http://jsfiddle.net/cr8s/96dsB/30/
Also, since the Internet is a fickle place and things disappear all the time, here's the updated JS (I left your HTML unchanged, and that's already in the question above):
$(function() {
$('.tab-pane > ul').sortable().disableSelection();
var
$tabs = $('#tabs'),
$tabItems = $('#myTab > li', $tabs);
$('#myTab a:last').tab('show');
$tabItems.droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var
$item = $(this),
href = $item.children('a').attr('href'),
$list = $(href).find('.connectedSortable');
console.log($list);
$list.append($('<li />').html(ui.draggable.html()).attr('class', ui.draggable.attr('class')));
$list.closest('.tab-pane').addClass('active').siblings().removeClass('active');
$item.addClass('active').siblings().removeClass('active');
}// drop(event, ui)
});// $tabItems.droppable()
$('#external-tab > ul > li').draggable({
appendTo: 'body',
helper: 'clone'
});
});// end of doc ready
Hope that solves this problem for some folks! It certainly gets me closer to solving my own use case, and I'll likely continue to update the fiddle linked above as I add additional features like the two I mentioned earlier.