javascript - jQuery sortable doesn't work correctly with horizontal list if list is empty before init - Stack Overflow

admin管理员组

文章数量:1310059

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

See example jsFiddle

Sample HTML:

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

Sample JS:

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

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

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

Sample 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;
}

---

UPDATE

I found related issue here

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

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

See example jsFiddle

Sample HTML:

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

Sample JS:

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

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

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

Sample 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;
}

---

UPDATE

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

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

• javascript
• jquery
• jquery-ui
• jquery-ui-sortable

Share Improve this question Follow edited Oct 1, 2013 at 2:30 skmasq asked Oct 1, 2013 at 1:53 skmasqskmasq 4,52177 gold badges4444 silver badges7777 bronze badges 1

• Its working fine for me.. I did manually add a <div> with words other than suck. The div's drag and sort fine. Perhaps with all the divs with the same name don't make this obvious? – zipzit Commented Oct 1, 2013 at 2:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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:

var i = 0;

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

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

And a jsFiddle showing it working.

Its working fine for me.. Try unique names for the category divs...

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

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

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

http://jsfiddle/NQMPr/23/

update.. my bad. in the above example I did have one element inside the container. When I start it from empty, you are right, the div's don't sort. Apologies...

本文标签：