如果列表在初始化之前为空，则jQuery sortable不适用于水平列表 [英] jQuery sortable doesn't work correctly with horizontal list if list is empty before init

问题描述

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

If I add elements to list after I initialize .sortable it doesn't work correctly.

请参阅示例 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

---

UPDATE

I found related issue here http://bugs.jqueryui.com/ticket/7498

因为this.floating仅在_create中确定，如果您以 一个空的可排序类别，假设它是垂直的.

because this.floating is only determined in _create, if you start with an empty sortable it is assumed to be vertical.

推荐答案

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

The workaround for that jQueryUI bug is to initialize the sortable with an element inside, then remove it immediately after initialization.

HTML:

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

JavaScript:

Javascript:

var i = 0;

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

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

还有一个 jsFiddle 显示它可以正常工作.

And a jsFiddle showing it working.

这篇关于如果列表在初始化之前为空，则jQuery sortable不适用于水平列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！