jQuery UI draggable - 유효한 드롭이 발생하면 복제본 제거

Question

다음과 같은 작업을 수행하려고하는데이 작업을 수행하는 올바른 방법을 찾을 수 없습니다.

오른쪽에서 왼쪽으로 끌 수있는 두 개의 열이 있습니다. 드롭 기능이 올바르지 않은 경우 되돌리기 기능이 제대로 작동하지만 왼쪽 열에 유효한 드롭이 발생하면 오른쪽 열의 항목을 제거하고 싶습니다. 조건부가 정확하지 않다는 것을 알고 있지만 드롭이 유효한지 확인하기 위해 어떤 플래그를 조사해야할지 모르겠습니다.

$("#sortable2 li").draggable({ 
     connectToSortable: "#sortable1", 
     helper: "clone", 
     revert: "invalid", 
     stop: function (event, ui) { 
      if (drop == "valid") 
      { 
       $(this).remove(); 
      } 
     } 
    }); 

Answer 1

당신은,

당신은 아무것도를 정렬하지 않는 경우 .sortable

example jsfiddle

$("#sortable1").sortable({ 
    receive: function (event, ui) { // add this handler 
     ui.item.remove(); // remove original item 
    } 
}); 

$("#sortable2 li").draggable({ 
    connectToSortable: "#sortable1", 
    helper: "clone", 
    revert: "invalid" 
}); 

Answer 2

시작로서 당신은 event-start와 event-stop의 차이점을 비교할 수 있습니다. 디버거를 사용하여 이벤트 함수로 들어가면 둘 사이의 차이점을 볼 수 있습니다.

Answer 3

에 receive 이벤트를 사용하여 원래 요소를 제거 처리하고 드롭이 유효한 경우 원래 항목을 제거 할 수 할 수 있습니다 helper:"clone"을 삭제하면됩니다. 내가 실종 정확히 무엇

$("#sortable2 li").draggable({ 
    revert: "invalid", 
});