5

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.

2

4 Answers 4

7

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());
            }
});
1
  • Thank you so much! Actually I tested that a couple of times but seems that I call this in the wrong View (working with backbone) and the container 'apc_column--content' wasn't rendered then. THANKS :)
    – dozed
    Aug 10, 2013 at 16:56
6

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

0

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)

0

You can just add these css to the ul element

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

You need to add a padding to ul element

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.