如果列表在初始化之前为空，则 jQuery 可排序不适用于水平列表答案

【问题标题】：jQuery sortable doesn't work correctly with horizontal list if list is empty before init如果列表在初始化之前为空，则 jQuery 可排序不适用于水平列表
【发布时间】：2013-10-07 01:17:45
【问题描述】：

如果我在初始化 .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 中确定，如果你从一个空的 sortable，它被假定为垂直的。

【问题讨论】：

它对我来说工作正常.. 我确实手动添加了一个
，其中包含除了吸以外的单词。 div 的拖动和排序很好。也许所有具有相同名称的 div 都不会让这一点变得明显？

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

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

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 表明它工作正常。

【讨论】：

【解决方案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 不排序。抱歉...

【讨论】：