Question

I am trying to use Jquery ui to simulate drag and drop, how would it be possible to not remove the item from the original list when dragging and dropping? In this case i want to keep the item in gallery but clone it into trash.

Jsbin example http://jsbin.com/igevut/1/edit

   $trash.droppable({
      accept: "#gallery > li",
      activeClass: "ui-state-highlight",
      drop: function( event, ui ) {
        deleteImage( ui.draggable );
      }
    });

function deleteImage( $item ) {
      $item.fadeOut(function() {
        var $list = $( "ul", $trash ).length ?
          $( "ul", $trash ) :
          $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );

        $item.find( "a.ui-icon-trash" ).remove();
        $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
          $item
            .animate({ width: "48px" })
            .find( "img" )
              .animate({ height: "36px" });
        });
      });
    }

Answer 1

Just add $item = $item.clone() at the start of your deleteImage function.