Sortable and droppable deactivate in jQuery UI

I have attached jQuery UI sortable and droppable to a few different pages on my page.

I want to have the elements that are dropped, not end up in the closest column to the 'droppable' column after the user has dragged across another active column.

ht开发者_StackOverflow中文版tp://jsfiddle.net/jordanbaucke/W3yyk/4/

I have tried to disable the closest 'sortable' column and reactivate when 'droppable' is active, but this doesn't work. How can I fix it?

You will need to add utilize the $.sortable('cancel') method on the $.droppable 'drop' event to like this:

$('#droppablecolumn').droppable({
    over: function(en, ui) {
        $(this).css('background-color', 'grey');
    },

    out: function(en, ui) {
        $(this).css('background-color', 'white');
    },

    drop: function(){
        $('.column').sortable('cancel');    
    }    
});

This should cancel the current $.sortable event once a drop has occurred.