在任意的DOM元素上启用sortable功能，通过鼠标点击并拖拽元素到列表中的一个新的位置，其他条目会自动调整。

默认情况下，sortable各个条目共享draggable属性。

  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });

连接列表

通过向connectWith选项传递一个选择器，将一个列表中的元素排序到另一个列表中，反之亦然。

    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();

在上面代码中，#sortable1，#sortable2是两个ul列表，同时两个列表都通过.connectedSortable类修饰。

标签页连接列表

通过反之列表项到顶部适当的标签页中，将一个列表中的元素排序到另一个列表中。

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