[jQuery-UI][Tabs] Sortable between Tabs.
Hello,
I have 2 tabs, and want to make each of its header is transferable
between those two tabs... (so if I drag a panel from Tab A, then drop it to Tab B, then that panel will become Tab B's panel),
I tried this script, but not working....
here's the code....
-
<script type="text/javascript">
jQuery(function() {
var $tabs = jQuery(".apb_container").tabs({
collapsible: true
}).find(".ui-tabs-nav").sortable();
var $tabsItems = jQuery("ul:first li",$tabs).droppable({accept: ".asd li", hoverClass: "ui-state-hover"});
});
</script>
<div class="demo">
<div class="ui-tabs apb_container" id="apbc_1">
<ul class="asd">
<li><a href="#apbc_1_1">Nunc tincidunt</a></li>
<li><a href="#apbc_1_2">Proin dolor</a></li>
<li><a href="#apbc_1_3">Aenean lacinia</a></li>
</ul>
<div id="apbc_1_1" class="ui-tabs-hide">
<p>a</p>
</div>
<div id="apbc_1_2" class="ui-tabs-hide">
<p>b</p>
</div>
<div id="apbc_1_3" class="ui-tabs-hide">
<p>c</p>
</div>
</div>
<div class="ui-tabs apb_container" id="apbc_2">
<ul class="asd">
<li><a href="#apbc_2_1">Subject</a></li>
<li><a href="#apbc_2_2" title="Curriculum"><span>Curriculum</span></a></li>
<li><a href="#apbc_2_3">Course</a></li>
</ul>
<div id="apbc_2_1" class="ui-tabs-hide"></div>
<div id="apbc_2_2" class="ui-tabs-hide"></div>
<div id="apbc_2_3" class="ui-tabs-hide"></div>
</div>
</div>
anyone can help?