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 widg

Answer 1

Check carefully for the width of your ul after the ul is empty And when your ul is empty there is no width and as a result, you cannot drop li over it. You can check the width of ul by applying a border. The solution is only applied width to your all ul and the problem will be sorted. eg: .droptrue{width: 100%} (.droptrue is my ul)

Answer 2

You can just add these css to the ul element

padding: 5px;
background-color: #f3f3f9;

You need to add a padding to ul element

Answer 3

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 4

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