jQuery droppable無法禁用

我有一個奇怪的問題可以droppable。 http://jsfiddle.net/samanth/dykcV/16/這個例子效果很好。一旦我放棄了可分解的div，它不允許我放棄其他任何東西。我在我的應用程序中有相同的代碼，但droppable接受drop。jQuery 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); 
    } 
});

來源

2012-10-05 Samanth Rao

您的核心要求是什麼？「它不允許我放棄任何其他的」意思？ – YogeshWaran

@YogeshWaran我的意思是，我應該只能放下一件物品。不僅僅如此。 JSFiddle中的代碼片段就是這樣做的。 –

@SamanthRao我已在下面更新了我的回答，以反映您提供的新信息。 – richardaday

Ajax調用是問題。讓我們打破發生了什麼：

可拖動的項目被丟棄到一個投擲的項目
你滴法追加拖動物品到可投放項目
你滴法然後執行一個Ajax調用
當ajax調用完成，狀態代碼是200你做一些小的css調整，然後禁用droppable接收任何更多可拖動項目的能力。

您列出的問題是，可放置的物品允許放置超過1個可拖動的物品。因此，Ajax調用會出現問題。如果沒有能夠測試它自己，我會說你遇到下列問題之一：

你的AJAX調用永遠不會成功

檢查：打開Firebug並檢查響應您的AJAX調用

你的AJAX調用與不是200

0的狀態碼返回

檢查：使用firebug調試AJAX調用返回時執行的函數。你的狀態碼是200嗎？

此關鍵字未引用元素，您認爲這是

檢查：使用Firebug調試獲取AJAX調用返回時執行的功能。 $（this）的值是多少？

如果$（這）是不是你的想法是，那麼我相信，這段JavaScript代碼會爲你工作：

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

在上面的代碼的關鍵是，我使用$ .proxy到確保被執行的函數將保持正確的範圍。更多信息：http://api.jquery.com/jQuery.proxy/

來源

2012-10-05 05:22:35 richardaday

感謝理查德的迴應。我已經添加了上面的代碼。 –

非常感謝你指出這個問題。你完全正確地說$（this）沒有返回droppable項目，而是指AJAX調用。由於缺少學分，我無法投票，但已接受您的解決方案。再一次，謝謝。 –

好聽！祝你好運！ – richardaday

jQuery droppable無法禁用

回答

相關問題