Jquery UI可排序选项卡，用于对内容和​​选项卡进行排序

Question

jQuery文档和示例非常清楚地向我展示了如何对选项卡进行排序： fillna

但是......我的要求是更改DOM的实际HTML，以便内容窗口的顺序随着可排序操作而变化。

所以DOM中的HTML看起来像这样：

sortable

然后，如果我使用<ul> <li><a href="#c1">Tab 1</a></li> <li><a href="#c3">Tab 3</a></li> <li><a href="#c2">Tab 2</a></li> <li><a href="#c4">Tab 4</a></li> </ul> 动作交换＃2和＃3，我就明白了：

<div id="c1">CONTENT TAB 1</div>
<div id="c3">CONTENT TAB 3</div>
<div id="c2">CONTENT TAB 2</div>
<div id="c4">CONTENT TAB 4</div>

哪个很可爱，但内容DIV保持不变，对于我的应用程序，我想要锁定此选项卡，然后将内容HTML变为内容：

file ( GLOB headerfiles "../common/include/tar/*.h")
if ("${grep_word}" STREQUAL "")
    SET (searchreg "LONG")
    foreach( eachheaderfile ${headerfiles} )
        MESSAGE(STATUS " INFILES= ${eachheaderfile}\n")
        FILE(READ ${eachheaderfile} file_content)
        #MESSAGE(STATUS " FILES_content= ${file_content}")
        string(REGEX REPLACE "${searchreg}" "SVN_LONG" modified_file_content "${file_content}" )
        FILE(WRITE ${eachheaderfile} ${modified_file_content})
        FILE(READ ${eachheaderfile} file_content1)
        MESSAGE(STATUS " FILES_content= ${file_content1}")
    endforeach(eachheaderfile)

    #MESSAGE(STATUS " outFILES= ${headerfiles}\n") 
endif()

Answer 1

好的，如果其他人想知道，我可以这样做，你可以这样做：

var i_tabs = $('#tab_div').tabs();
var dragstart_i;
i_tabs.find(".ui-tabs-nav").sortable({
    axis: "x",
    start: function (e, ui) {
        dragstart_i= $(ui.item[0]).index();
    },
    stop: function (e, ui) {
        var i = $(ui.item[0]).index();
        var new_index;
        if (dragstart_i > i) {
            new_index = i;
        } else {
            new_index = i + 1;
        };
        var content = $('#slide_' + extractNumbers($(ui.item[0]).attr('id'))); // .remove(); 
        $(content).insertBefore($("#slider_images > div")[new_index]);
        i_tabs.tabs("refresh");
    }
});