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无法禁用

回答

相关问题