Remove Item from Sortable

Remove Item from Sortable

Hi all together!

I have sth like a shopping card where I can drag & drop items from a draggable on a sortable by cloning the items.

  1.     $(function() {

            $(".sortable").sortable({
                revert: true,
             connectWith: 'ul',
             remove: function() {alert($(this).position)}
            });
            $("#draggable > li").draggable({
                connectToSortable: '.sortable',
                helper: 'clone',
                revert: 'invalid',
            });

        });












  2. <div class="demo">
       
    <ul id="draggable">
        <li class="ui-state-highlight">Article 1</li>
        <li class="ui-state-highlight">Article 2</li>
    </ul>


    <ul id="sortable" class="sortable">
    </ul>


    </div>













Now I try to realize that one can remove an item from a Sortable by dragging it just out of the list on a droppable. For the beginning its just okay, if it would work that some alert is coming up when the item from the Sortable is dropped on the droppable:

  1.     $(function() {

            $(".sortable").sortable({
                revert: true,
             connectWith: 'ul',
             remove: function() {alert($(this).position)}
            });
            $("#draggable > li").draggable({
                connectToSortable: '.sortable',
                helper: 'clone',
                revert: 'invalid',
            });

            $("#droppable").droppable({
                drop: function() {
                    alert('ok');
                }
          });

        });



















  2. <div class="demo">
       
    <ul id="draggable">
        <li class="ui-state-highlight">Article 1</li>
        <li class="ui-state-highlight">Article 2</li>
    </ul>


    <ul id="sortable" class="sortable">
    </ul>


    <div id="droppable" class="ui-widget-header">
        <p>Drop here</p>
    </div>


    </div>

















Why doesn't this work?

I have also tried to make a simple "Link for deleting the item" with an effect instead by adding this:

 $("a").click(function(){
   $(this).parent.hide("slow");
   return false;
 });

But it also does not work.

Any ideas?