Jquery sortable return single item to original list

I have shopping cart set up where the user can drag an item from the store shelf and place it in the shopping cart. This all works great. The next step of programming that I cannot resolve is how to remove the item from the cart with a click. There is this in the documen开发者_Go百科tation but there is no example to call it.

$('.drag_box').bind('click', function() {
this.sortable( "destroy" );
});

Does nothing. Help please.

If you just want to remove the element, you can use

$('.drag_box').bind('click', function() {
   $(this).remove();
});

Thank you - I have added this but it still moves the original DOM element, what I was ultimately looking to do was to leave the original there and add a different class to it so the user would know it was in the cart. Here is my code.

$(function() {
$("drag_box").sortable({
        connectWith: 'li.empty_list',
        opacity: 0.6,
        handle: 'img',
        forcePlaceholderSize: true, 
        clone:'helper',
        revert:true 
});

$( "li.empty_list" ).sortable({
    stop: function(event, ui) { 
    $(ui.item).addClass("moved");
}

});