Question

根据这个页面：

我可以将标签的内容放在单独的文件中。这意味着我只需要拥有以下HTML：

<div id="tabs">
    <ul>
        <li class="tab" id="tab_1"><a href="sortable-0.html">Home</a></li>
    </ul>
</tab>

sortable-0.html只包含：

<div class="column" id="column_1">

    <div class="portlet" id="portlet_1">
        <div class="portlet-header">Home 1</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

</div>

<div class="column" id="column_2">

</div>

<div class="column" id="column_3">

</div>

但是当我这样做时，sortables停止工作。如果我将可排序的HTML复制回原始文件，它将再次开始工作。

这是当前脚本，其中代码全部在1个文件中，因此下面的链接将起作用。但是，如果我将可排序的HTML移动到另一个文件中，然后将新文件的URL粘贴到jquery ui tabs html的以下部分中，我无法工作：

<li class="tab" id="tab_1"><a href="sortable-0.html">Home</a></li>

与当前工作示例的链接是：

http://jsfiddle.net/oshirowanen/ZjXz6/

Answer 1

你必须了解JS是如何工作的...如果你调用.sortable（）函数，它将在你的页面中搜索所有带有“portlet”类的元素并使它们可以排序。

但是：使用Ajax你可以这样做：加载页面，你的可排序函数被调用，它将搜索类“portlet”的所有元素并使它可以排序，然后你通过ajax加载你的内容...你之前的可排序调用对您的新内容无效。这意味着，如果您通过ajax加载数据，则需要在内容成功加载后再次调用.sortable（）：）

看看你是否可以添加这样的东西：

$("#tabs").tabs({
    ajaxOptions: {
        success: function(){
            $(".column").sortable({
                connectWith: '.column'
            });
        }
    }
});

jquery选项卡，在单独的文件中包含可排序项

1 个答案: