CODEWITHSUNDEEP
jqueryhtmljquery-ui
Edward
Edward

Reputation: 3081

Jquery droppable do not remove element

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

Upvotes: 1

Views: 1552

Answers (2)

spathirana
spathirana

Reputation: 155

You can use a method to return a helper that would act as a cloned object of the draggable.

 $( "li", $gallery ).draggable({
      cancel: "a.ui-icon", // clicking an icon won't initiate dragging
      revert: "invalid", // when not dropped, the item will revert back to its initial position
      containment: "document",
      helper: getHelper,
      cursor: "move"
    });

function getHelper(event){

  // return html for the helper
}

See the link http://shyalika.com/create_drag_and_drop_example for an example

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

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

Upvotes: 2

Related Questions