JQuery UIのソート可能なリストを使用して、Bootstrapに基づいてページを構築してみます。グローバル スペースに 1 つのリストがあり、タブに 2 つのリストがあり、外部リストから項目をドラッグして、リストに追加するためにタブ ナビゲーションにドロップするのが好きです
ただし、ブートストラップ タブ ナビゲーションに切り替えると、ドロップ時の外部アイテムは消えますが、タブ リストには表示されません。これは、JQ UI の「Connect list with Tab」に基づく私の例です。
$(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><a href="#tabs-1" data-toggle="tab">Nunc tincidunt</a></li>
<li><a href="#tabs-2" data-toggle="tab">Proin dolor</a></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>