JQuery sorting doesn't work correctly with horizontal list if list is empty before start

Question

If I add items to the list after initializing .sortable , it does not work correctly.

See jsFiddle example

HTML example:

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

JS example:

 $(".container").sortable({ containment: 'parent' }); $(".container").disableSelection(); $(".add-fields").click(function(){ $(".container").append("<div>sucke</div>") }) 

CSS example:

 .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 a related problem here http://bugs.jqueryui.com/ticket/7498

because this.floating is only defined in _create, if you start with empty sorting is considered vertical.

Answer 1

The workaround for this jQueryUI error is to initialize the sort with the element inside, and then delete 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 jsFiddle shows that it works.

Answer 2

His work is wonderful for me .. Try unique names for div categories ...

 $(".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/

update .. my bad. in the above example, I had one element inside the container. When I start it from empty, you're right, the div does not sort. Sorry ...