jQuery sortable('disable') from start event not entirely working like expected

Question

The below code does not fully disable the sortables on the start event. It will add the classes ui-sortable-disabled and ui-state-disabled to the sortable elements, but it doesn't disable the functionality - in other words, the sortables look disabled, but they still accept the dragged item and behave like they are enabled.

var assignedSortables;
var startDrag = function(event, ui) { 
    assignedSortables.each(function() {$(this).sortable('disable');});
};

var stopDrag = function(event, ui) { 
    assignedSortables.each(function() {$(this).sortable('enable');});
};

assignedSortables = $(".my-sortable-containers").sortable({
    connectWith: '.my-sortable-containers',
    start: startDrag,
    stop: stopDrag
});

The reason I want to do this is on drag start is because I might need to disable other connected sortables that already contain the item being dragged (I stripped out the logic in order to simplify). Is this a bug or is there a way around it?

Answer 1

I just ran into the same issue. I was able to get the connected sortable that I wanted to disable to disable (for reals) by calling the 'refresh' method on the initiating sortable.

So, inside your start callback would be something like:

$connectedList.sortable('disable');
$(ui.sender).sortable('refresh');

I guess that internally the list grabs the set of connected and non-disabled lists before the start event is triggered and does not check to see if that list changes after start is triggered.