is there an event when a draggable item is removed from a droppable area?

Question

I have one droppable area that contains a list of Field Names (all individually draggable), and then a table with X headers that are all droppable and initially empty.

Is there a way to tell when an item has been removed from a table header? I'm thinking of if a user drops a header from one TH to another TH or if a user drags a field from a TH back to fieldNamesDroppable. Then I would have updated two columns or one outdated column.

Current code:

$('#fieldNamesDroppable').droppable({
    drop: function (event, ui) {
        ui.draggable.appendTo($(this)).css({
            top: '0px',
            left: '0px'
        });
    }
});

$('th').droppable({
    drop: function (event, ui) {
        var $this = $(this);

        // if there is already an item here, cancel the drop and flash error message
        if ($this.find('.drag').length >= 1) {
            ui.draggable.draggable('option', 'revert', true);
            errorMessage("You can only add one heading to each column.");
            return;
        }

        // else, drop item
        $this.html('');
        ui.draggable.appendTo($this).css({
            top: '0px',
            left: '0px'
        });

        // update the field mappings in the controller
        updateFieldMappingsInput(ui.draggable);
    }
});

Where 'updateFieldMappingsInput' updates a related process for keeping track of the headers mappings.

Answer 1

I believe what you are wanting is the out event, which is described in the API as:

Triggered when an accepted draggable is dragged out of the droppable (based on thetolerance option).