jQuery UI draggable - remove clone if a valid drop occurred

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 l开发者_如何学运维i").draggable({
        connectToSortable: "#sortable1",
        helper: "clone",
        revert: "invalid",
        stop: function (event, ui) {
            if (drop == "valid") 
            { 
               $(this).remove(); 
            }
        }
    });

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"
});

As a start you can compare the differences between event-start and event-stop. Use a debugger to break into the Event Function and you can see the difference between the two.

If you are not sorting anything and want the original item to be remove as the drop is valid, you can just remove the helper:"clone".

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