将新项添加到jquery可排序,而不是通过刷新获取

Question

我正在排序一个对象列表,其中一些是常规对象,其中一些是其他对象的容器.

使用句柄排序工作正常,除非我向容器添加新对象,刷新后无法识别.

我有以下HTML:

<button>add another option</button>
<div class="con">
    <div class="ui-state-highlight"><span class="handle">handle</span> Item 1</div>
    <div class="ui-state-highlight"><span class="handle">handle</span> Item 2</div>
    <div class="ui-state-highlight"><span class="handle">handle</span> Item 3</div>
    <div class="subthing">
        <span class="handle">handle</span>
        <div>    <span class="handle">subhandle</span> subitem</div>
        <div>    <span class="handle">subhandle</span> subitem</div>
    </div>
</div>

和脚本:

$('button').click(function() {
    var x = $('<div class="ui-state-highlight"><span class="handle">handle</span> newthing</div>');
    x.appendTo('.con')
    $(".con").sortable('refresh')
});

var container = $(".con");
container.sortable({
    handle: container.children().children(".handle")
});?

小提琴

如上面的代码所示,如​​果添加新项,则无法使用其余元素对其进行排序.我知道如果我说handle属性是.handle,它会这样做,但我不希望子句柄成为可排序的一部分.

Answer 1

你需要的是:

container.sortable({
  handle: '> .handle'
});?

看看这个:http://jsfiddle.net/hQsjD/

这是仅仅捕获直接的.handle孩子的>标志.

handle参数是一个字符串选择器而不是实际元素是很重要的,因为在调用refresh时它们不会刷新.