jquery中的可排序选项卡可排序

时间:2013-12-16 12:47:57

标签: jquery jquery-ui jquery-ui-sortable

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

1 个答案:

答案 0 :(得分:7)

这可能就像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" );
        });
      }
    });
  });