jQuery UI drop on empty container/list not working

jquery, jquery-ui, jquery-ui-sortable

Solution

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());
            }
});

Problem

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.

Original source