Question

如果我在初始化.sortable后向列表中添加元素，则它无法正常工作。

参见示例jsFiddle

示例HTML：

<div class="container">
</div>
<br />
<button class="add-fields">add</button>

示例JS：

$(".container").sortable({
    containment: 'parent'   
});

$(".container").disableSelection();

$(".add-fields").click(function(){
    $(".container").append("<div>sucke</div>")   
})

示例CSS：

.container {
    height: 30px;
    width: 100%;
    background: blue;
    position: relative;
    float: left;
}
.container > div {
    position: relative;
    float: left;
    height: 100%;
    width: 80px;
    background-color: red;
    line-height: 30px;
    text-align: center;
    margin: 0;
    padding: 0;
    cursor: default;
}

更新

我在http://bugs.jqueryui.com/ticket/7498

找到了相关问题

因为this.floating只在_create中确定，如果你开始一个空的可排序，它被认为是垂直的。

Answer 1

该jQueryUI错误的解决方法是使用内部元素初始化sortable，然后在初始化后立即将其删除。

HTML：

<div class="container"><div id="test">blah</div>
</div>
<br />
<button class="add-fields">add</button>

使用Javascript：

var i = 0;

$(".container").sortable({
    containment: 'parent'   
});
$(".container").disableSelection();
$("#test").remove();

$(".add-fields").click(function(){
    $(".container").append("<div>sucke" + (i++) + "</div>")   
})

jsFiddle显示它正常工作。

Answer 2

它适用于我..尝试类别div的唯一名称...

$(".container").sortable({
    containment: 'parent'     
});

$(".container").disableSelection();

$(".add-fields").click(function(){
    $(".container").append("<div>sucke"+Math.round(Math.random()* 100)+"</div>")   
})

http://jsfiddle.net/NQMPr/23/

更新..我的坏。在上面的例子中，我确实在容器中有一个元素。当我从空开始时，你是对的，div不分类。道歉...

如果list在init之前为空，则jQuery sortable与水平列表无法正常工作

更新

2 个答案: