Question

我有以下结构的两级深度Sortable（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>

当我动态插入（prepend）一个额外的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/

Answer 1

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

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

refresh in the Sortable Widget的jQuery UI文档说：

刷新（）

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

此方法不接受任何参数。

<强>更新

对不起，我在你正在进行的两级排序之前错过了（我承认我以前没有使用过sortables）。小提琴非常有用 - 我建议为每个Javascript问题创建一个！

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

connectWith

你完成了。 It works (JsFiddle)

Sortable无法识别插入的元素

1 个答案: