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
Share Improve this question edited Oct 1, 2013 at 2:30 skmasq asked Oct 1, 2013 at 1:53 skmasqskmasq 4,5217 gold badges44 silver badges77 bronze badges 1because this.floating is only determined in _create, if you start with an empty sortable it is assumed to be vertical.
- 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
2 Answers
Reset to default 6The 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...