无法禁用jQuery droppable

Question

我对droppable有一个奇怪的问题。http://jsfiddle.net/samanth/dykcV/16/这个例子运行得很好。一旦我将一个div放在droppable上，它就不允许我在上面再放任何东西了。我在我的应用程序中有相同的代码，但是droppable接受丢弃。

我有一个AJAX调用，然后再做一个drop。这会是一个问题吗？

这是我的实际代码。

$(".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. Draggable item
2. drop方法将可拖放项追加到droppable item
3. drop方法，然后执行ajax调用
4. 当ajax调用完成且状态代码为200时，您进行一些次要的css调整，然后禁用droppable接收任何其他可拖放项的功能。

< code >G29

您概述的问题是droppable允许在其中放置多个可拖动项。因此，问题发生在Ajax调用上。如果不能亲自测试它，我会说您遇到了以下问题之一：

你的AJAX调用永远不会在之后成功

检查:打开firebug并检查AJAX调用的响应

您的AJAX调用返回的状态码不是200

检查:使用firebug调试AJAX调用返回时执行的函数。你的状态码是200吗？

此关键字没有引用您认为它是的元素

检查:使用firebug调试AJAX调用返回时执行的函数。$(this)的值是多少？

如果$( 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/