jQuery UI drop on empty container/list not working

Question

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.

Answer 1

WORKING FIDDLE

Basically, you were setting the sortable on the wrong element. I change it to the .apc_column--content element and now it works. Since both lists have that class I also had to change the connectWith property to that as well.

Cheers.

$(".apc_column--content").sortable({
            placeholder: 'apc_drop-placeholder-blocked',
            forcePlaceholderSize: true,
            items: '.apc_inner_item',
            connectWith: ".apc_column--content",
            tolerance: "pointer",
            dropOnEmpty: true,
            distance: 0.5,
            stop: function(event, ui){
                // that.droppedItem(ui.item, ui.item.index());
            }
});

Answer 2

u could add an empty invisible <li></li> to the empty ul to solve this problem . ^_^