jQuery UI draggable - remove clone if a valid drop occurred

Question

I'm trying to get something like the following to work but can't find the correct way to use the stop event for this.

I've got two columns where you can drag from the right to the left. I've got the revert function working correctly if the drop was invalid but I want to remove the item in the right column if a valid drop occurred on the left column. I know the conditional isn't correct but I'm not sure what flag to look for to determine if the drop was valid.

$("#sortable2 li").draggable({
        connectToSortable: "#sortable1",
        helper: "clone",
        revert: "invalid",
        stop: function (event, ui) {
            if (drop == "valid") 
            { 
               $(this).remove(); 
            }
        }
    });

Answer 1

you can handle removing the original element using the receive event on the .sortable

example jsfiddle

$("#sortable1").sortable({
    receive: function (event, ui) { // add this handler
        ui.item.remove(); // remove original item
    }
});

$("#sortable2 li").draggable({
    connectToSortable: "#sortable1",
    helper: "clone",
    revert: "invalid"
});