jQuery Ui拖放

Question

I am dragging my elements from left nav to a droppable area using jquery UI,what should i do if i have to remove dragged elements from droppable area? The simple functionality that I am expecting is that when it is dragged out of the container it should be deleted. It should not snap back to the container. here is my code:

$(document).ready(function() {
$(".txtI").draggable({
    appendTo: "body",
    helper: "clone"
});

$("#phone").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function(event, ui) {
        $(this).find(".placeholder").remove();
        ui.draggable.clone().removeClass("txtI").addClass("txt2").appendTo(this);
    }
}).sortable({
    items: "div",
    sort: function() {
        $(this).removeClass("ui-state-default");
    }
});

});

Answer 1

Thanks for your inputs. This is achieved by a simple line:

ui.draggable.remove();