Reputation:
$("#source li").draggable({
appendTo: "#destination",
helper: "clone",
connectToSortable: "#destination",
containment: "document"
});
$("#destination").sortable({
items: "li:not(.placeholder)",
connectWith: "li",
placeholder: "dragging-placeholder",
sort: function() {
$(this).removeClass("ui-state-default");
},
over: function() {
$(".placeholder").hide();
},
out: function() {
if ($(this).children(":not(.placeholder)").length === 0) {
$(".placeholder").show();
}
}
});
JSFiddle: http://jsfiddle.net/j9FK5/7/
When I drag a few boxes from the source UL to the target, they become very hard to sort, especially when trying to move to the beginning. Regular sorting works with the same CSS.
I know it's a common problem, but none of the solutions worked in this particular case.
Upvotes: 2
Views: 672
Reputation: 30993
You can change your tolerance
option and set it to pointer
.
Specifies which mode to use for testing whether the item being moved is hovering over another item. Possible values:
"intersect": The item overlaps the other item by at least 50%.
"pointer": The mouse pointer overlaps the other item.
Demo: http://jsfiddle.net/Fs772/
Upvotes: 2