jQuery droppable을 비활성화 할 수 없습니다.

Question

나는 droppable에 이상한 문제가 있습니다. http://jsfiddle.net/samanth/dykcV/16/이 예제는 매우 잘 작동합니다. 일단 내가 droppable에 div를 떨어 뜨리면, 나는 그 위에 다른 것을 떨어 뜨리지 못하게한다. 내 응용 프로그램에 동일한 코드 조각이 있지만 droppable은 드랍을 허용합니다.

나는 드롭하기 전에 AJAX 호출을했습니다. 이것이 문제가 될 수 있습니까?

여기가 내 실제 코드입니다.

$(".dropItem").droppable({ 
    accept:'.dragItem', 
    hoverClass: 'hovered', 

    drop:function (event, ui) { 
     var answerNumber = $(this).attr('id'); 
     var questionNumber = ui.draggable.attr('id'); 

     $(this).append($(ui.draggable)); 

     //Send ajax query and get the response here.. 
     // generating form data 

     send('matchAnswer?gameId=' + gameId + '&answerId=' + answerNumber + '&questionId=' + questionNumber, function (e) { 
      if (this.status == 200) { 
       var resp = this.responseText; 
       if (resp == "true") { 
        $(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" }).draggable ("disable").css ({ opacity : 1 }); 
        $(this).droppable('option', 'disabled', true); 
       } else { 
        // do something here 
       } 
      } 
     }, formData); 
    } 
}); 

Answer 1

Ajax 호출이 문제입니다. 이제 무슨 일이 일어나고 있는지 분해하자

1. 드래그 가능한 항목이 낙하 할 항목 삭제됩니다
2. 당신의 하락 방법은 당신의 하락 방법은 다음 아약스 호출을 실행
3. 낙하 할 항목으로 드래그 항목을 추가
4. 때 ajax 호출이 완료되고 상태 코드가 200이면 약간의 CSS 수정을 한 다음 drappable이 draggable 항목을 더 이상 수신하지 못하게합니다.

당신이 설명한 문제는 droppable이 두 개 이상의 draggable 항목을 그 안에 넣을 수 있다는 것입니다. 따라서 문제는 Ajax 호출에서 발생합니다.

이

---

귀하의 AJAX 호출이 결코

가 확인하려면 성공하지 : 그것을 자신을 테스트 할 수없이, 나는 다음과 같은 문제 중 하나가 발생하는 말을 열기 불을 지르고과에 대한 응답을 확인을하여 AJAX 호출

---

귀하의 AJAX 호출이 200

0이 아닌 상태 코드로 반환

확인할 내용 : AJAX 호출이 반환 될 때 실행되는 함수를 디버깅하려면 파이어 버그를 사용하십시오. 귀하의 상태 코드는 200입니까? 사용 방화범을 때 AJAX 호출이 반환 실행됩니다 기능을 디버깅 :

---

이 키워드는 요소를 참조하지 않는 당신은

가 확인하려면 생각합니다. $ (this)의 가치는 무엇입니까?

$ (이) 그런 다음 나는이 자바 스크립트 코드가 당신을 위해 작동합니다 생각, 그것이 생각되어 있지 않은 경우 :

send('matchAnswer?gameId=' + gameId + '&answerId=' + answerNumber + '&questionId=' + questionNumber, 
    $.proxy(function (e) { 
    if (this.status == 200) { 
     var resp = this.responseText; 
     if (resp == "true") { 
      $(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" }).draggable ("disable").css ({ opacity : 1 }); 
      $(this).droppable('option', 'disabled', true); 
     } else { 
      // do something here 
     } 
    } 
}, this), formData); 

I가 $ .proxy를 사용하고 있음을 위의 코드의 핵심이다 실행되는 함수가 올바른 범위를 유지하는지 확인하십시오. 추가 정보 : http://api.jquery.com/jQuery.proxy/