jquery中的可排序选项卡

【问题标题】：Sortable tabs in jquery Sortablejquery中的可排序选项卡
【发布时间】：2013-12-16 12:47:57
【问题描述】：

在此示例中http://jqueryui.com/sortable/#connect-lists-through-tabs 它通过选项卡连接列表。我怎样才能有可排序的标签？

【问题讨论】：

您尝试过sortable tabs demo page中提出的解决方案吗？
但我两者都想要。我可以对标签进行排序，同时在标签之间进行排序。有可能吗？
那么，您是否尝试将这两种方法结合起来？（Droppable 可能在此处与 sortable 冲突，但在您尝试之前您不会知道。）

【解决方案1】：

在JSFiddle这个例子中是可能的

$(function() {
    var tabs = $( "#tabs" ).tabs();
    tabs.find( ".ui-tabs-nav" ).sortable({
      axis: "x",
      stop: function() {
        tabs.tabs( "refresh" );
      }
    });
  });  
    $(function() {
    $( "#sortable1, #sortable2" ).sortable().disableSelection();

    var $tabs = $( "#tabs" ).tabs();

    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" );
        });
      }
    });
  });

【讨论】：