Question

I have two lists, sortable and sortable connected.
When I reach a limit of 5 items in the sortable connected list I don’t want to be able to add another item. But if I choose to delete an item in the connected list I want that list active again. I also want to be able to continue to sort that second list.

LIST ONE

LIST TWO

I originally thought of using
$(this).sortable(“disable”);

but that would disable LIST TWO entirely. I wouldn’t then be able to delete an item from the list to bring it under the quota.

I also found:
$(ui.sender).sortable(‘cancel’);
which cancels the currently dragged item. Problem with this is I’m moving clones so I end up with the clone in LIST ONE and I merely want it deleted.

Note the DELETE function is when I want to delete an item from the connected list(s). Currently working. But once I reach the quota and disable the sortable. it also doesn’t allow deleting an item.

Any ideas appreciated.

Working example

Answer 1

Maybe you could just set it like this in your update callback function:

Replace:

if(($(this).find('li').length) >4) {
                    //alert('Player limit reached!');
                    $(this).sortable("disable");    
                }

By:

if(($(this).find('li').length) >5) {
                    $(ui.item).remove();    
                }

There is surely more elegant way to do this.