I have a problem with the jQuery UI sortable widget. I simply can't drop any item on an empty container. When the container has an item it works perfectly. I call the widget like this:
$(".apc_row--columns", this.$el).sortable({
placeholder: 'apc_drop-placeholder-blocked',
forcePlaceholderSize: true,
items: '.apc_inner_item',
connectWith: ".apc_column--content",
tolerance: "pointer",
handle: '.move_handle',
helper: "clone",
dropOnEmpty: true,
distance: 0.5,
stop: function(event, ui){
that.droppedItem(ui.item, ui.item.index());
}
});
Searching found out that the connected list/container needs a padding/min-height so jQuery could calculate the position correctly.
But the connected div ".apc_column--content" has a min-height and also a padding. I also tested to put an item with "display:none" on the container but that didn't help.
I just cannot get it to work (tested all browsers) and would really appreciate any help!
Thank you.
EDIT: Made a jsfiddle for the problem: http://jsfiddle.net/Sf5QW/1/
If you move all items from the left list to the right (or other way) you can't move any item to the empty list.