Jquery droppable이 요소를 제거하지 않습니다.

Question

드래그 앤 드롭을 시뮬레이트하기 위해 Jquery UI를 사용하려고합니다. 끌어서 놓을 때 원본 목록에서 항목을 제거하지 못하게하는 방법은 무엇입니까? 이 경우 갤러리에 항목을 보관하고 있지만 휴지통에 복제하고 싶습니다.

Jsbin 예 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

그냥 deleteImage 함수의 시작 부분에 $item = $item.clone()을 추가합니다.

Answer 2

메서드를 사용하여 드래그 가능 객체의 복제 된 객체 역할을하는 도우미를 반환 할 수 있습니다.

$("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 
} 

는 예를 들어 링크 http://shyalika.com/create_drag_and_drop_example를 참조