0

我有以下结构的两级深度可排序（jQuery）列表。ul 元素和 li 元素都是可排序的。

<div id="container">    
    <ul id="x_one">
        <li class="y_one"></li>
        <li class="y_two"></li>
        <li class="y_three"></li>
    </ul>
    <ul id="x_two">
        <li class="y_four"></li>
        <li class="y_five"></li>
        <li class="y_six"></li>
    </ul>
</div>

当我动态插入（前置）一个额外的 ul 元素时，如下所示：

<div id="container">    
    <ul id="x_three">

    </ul>
    <ul id="x_one">
        <li class="y_one"></li>
        <li class="y_two"></li>
        <li class="y_three"></li>
    </ul>
    <ul id="x_two">
        <li class="y_four"></li>
        <li class="y_five"></li>
        <li class="y_six"></li>
    </ul>
</div>

在刷新页面之前，我无法将 li 元素拖到 ul#x_three 上。

jQuery 的 Sortable 如何识别这些插入的元素？

jQuery代码：

$('#container').sortable({    
  update: function() {
   $.post($(this).data('update-url'), $(this).sortable('serialize'));
  }
});

http://jsfiddle.net/mvhB4/2/

4

1 回答 1

1

当您自己将项目添加到可排序对象时（而不是通过在可排序对象中拖放），它们没有操作所需的附加事件代码。您可以通过调用'refresh'容器来解决此问题：

$('#container').sortable('refresh');

Sortable Widget 中用于刷新的 jQuery UI 文档说：

刷新（）

刷新可排序的项目。触发所有可排序项目的重新加载，从而识别新项目。

此方法不接受任何参数。

更新

很抱歉，我在您进行的两级排序之前错过了（我承认我之前实际上没有使用过 sortables）。小提琴非常有帮助——我建议为每个 Javascript 问题创建一个！

问题是，由于您不仅要<ul>对 #container 中的元素进行排序<div>，而且还要对<li>它们下面的元素进行排序 - 并使用connectWith它们使它们跨列表可移动 - 当您添加 new<ul>时，需要将其设为可排序并且不是（而且它也不是connectWith组的一部分）。所以它就像重新执行初始化代码一样简单：

$('.list_type').sortable({
     connectWith: '.list_type'
});

你完成了。它有效（JsFiddle）。

于 2013-04-06T01:40:47.033 回答