div가 이미 삭제 된 경우 드롭을 사용 중지 하시겠습니까?

Question

jquery를 가르치기 위해 드래그 앤 드롭 게임을 만들었습니다. 모든 것이 효과가있는 것으로 보입니다. 그러나 같은 사각형 위에 하나 이상의 아이템을 떨어 뜨릴 수 있습니다. 장소 홀더에 이미지가있는 경우 삭제할 수 없도록 설정하려고합니다.

내가 살펴본 : 드롭을 비활성화

`greedy: true` 

하지만 난 다시 또한 그것을 가능하게하는 방법을 잘 모르겠어요 :

$(this).droppable('disable'); 

내가 얻을 수있는 이들 모두 해제하려면 블록/이미지가 원래 위치로 되돌아 가거나 다른 사각형으로 옮겨지면 다시 활성화 할 수있는 방법을 모르겠다.

전체 버전 : http://creativelabel.co.uk/drag-and-drop/

UPDATE : 이는 드롭 가능한 슬롯에 대한 코드입니다.

for (var i=0; i<=19; i++) { 
    var images = 'images/slot' + slotNumbers[i] + '.jpg'; 
$('<div class="placeholder"><div class="img-slot"></div></div>').attr('id', 'slot'+slotNumbers[i]).data('slotNumbers', slotNumbers[i]).appendTo('#imgSlots').droppable({ 
     accept: '#images img', 
     hoverClass: 'hovered', 
     drop: handleDropEvent, 
     activate: handleDragEvent 
}); 

이 drop: 이벤트 코드 :

function handleDropEvent(event, ui) { 
    var slotNumber = $(this).data('slotNumbers'); 
    var imgNumber = ui.draggable.data('number'); 
    ui.draggable.addClass('dropped'); 
    $(this).droppable('disable'); 
    ui.draggable.position({ of: $(this), my: 'right top', at: 'right top' }); 

    if (slotNumber == imgNumber) { 
    ui.draggable.addClass('img-match'); 
    ui.draggable.data("valid", true); 

    imgMatch++; 
    } else { 
     if(ui.draggable.data("valid")) { 
     imgMatch--; 
     ui.draggable.data("valid", false); 
     } 
    } 

activate: 코드 :

function handleDragEvent(event, ui) { 
    $(this).droppable('enable'); 
    if(ui.draggable.data("valid")) { 
     imgMatch--; 
     $('input[name=Score]').val(imgMatch); 
     $('#score h1').text(imgMatch); 
     ui.draggable.data("valid", false); 
    } 
} 

Answer 1

docs 그건 당신이 사용하지 않도록 표시 ("방법"탭에서 봐) :

$(this).droppable('disable'); 

그리고 당신은

$(this).droppable('enable'); 

---

업데이트를 사용할 수 있도록 :이 라이브 예 확인 : 큰 상자에 빨간색 사각형의 http://jsfiddle.net/QqJRs/ 드래그를하고 드롭 (그것 떨어 표시하는 녹색으로 바뀝니다). 하나는 안에있는 동안 다른 사람을이 상자에 놓을 수 없습니다. 이제 드래그 아웃합니다 (빨간색으로 바뀌면 제거되었습니다). 이제 다른 사람들을 그 자리에 떨어 뜨릴 수 있습니다.

이 핵심은 아래의 내 의견에 설명 된대로입니다. 당신이 항목에 컨테이너를 연결 컨테이너에서 항목을 삭제할 때 : 다시 드래그 할 때, 그리고 unassociate

drop: function(event,ui){ 
    ui.draggable.addClass('dropped'); // taken from your code & I used to change color 

    ui.draggable.data('droppedin',$(this)); // associate the container 
    $(this).droppable('disable'); // disable the droppable 
} 

을하고 다시 활성화 :

는 는

drag: function(event,ui){ 
     if($(this).data('droppedin')){ 
      $(this).data('droppedin').droppable('enable'); v// re-enable 
      $(this).data('droppedin',null); // de-associate 
      $(this).removeClass('dropped') // remove class 
     } 
    }