jQuery選項卡插件是一個非常實用的插件，它可以輕松地為網站添加選項卡功能。而在這些選項卡中，有時候我們也需要對選項卡進行排序。幸運的是，jQuery選項卡插件可以很容易地實現這個功能。

$(function() {
//初始化選項卡
$("#tabs").tabs();
//使選項卡可排序
$("#tabs").sortable({
axis: "x", //只允許水平方向拖動
handle: ".ui-tabs-nav li", //拖動手柄是選項卡標題
tolerance: "pointer", //只有指針懸停在選項卡上時才允許拖動
stop: function(event, ui) {
//重新排列選項卡
ui.item.parent().children().each(function(index) {
$(this).find("a").attr("href", "#tabs-" + (index + 1));
$(this).find("a").html("Tab " + (index + 1));
$("#tabs-" + (index + 1)).html("這是選項卡 " + (index + 1) + " 的內容。");
});
//重新初始化選項卡
$("#tabs").tabs("refresh");
}
});
});

上述代碼中，我們首先初始化了一個jQuery選項卡插件，并將它綁定到一個id為“tabs”的元素上。然后，我們使用jQueryUI的sortable方法，將選項卡設為可排序。可排序的選項卡只能水平方向拖動，而拖動手柄則是選項卡標題。除此之外，我們還設置了tolerance選項，只有指針懸停在選項卡上時才允許拖動。

在選項卡排序完成后，我們需要重新排列選項卡，并更新它們的內容和標題。為了實現這個功能，我們遍歷選項卡，更新它們的href屬性和HTML內容。接下來，我們重新初始化選項卡，并將它們綁定回拖動方法上。這樣一來，我們就實現了一個可以排序的jQuery選項卡插件。