Question

我对droppable有一个奇怪的问题。 http://jsfiddle.net/samanth/dykcV/16/此示例效果很好。一旦我在droppable上放了一个div，它就不允许我放弃其他任何东西。我的应用程序中有相同的代码，但droppable接受drop。

在进行放弃之前我有一个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调用是个问题。让我们分解正在发生的事情：

可拖动项目被放入可投放项目
您的drop方法将可拖动项目附加到可放置项目
您的drop方法然后执行ajax调用
当ajax调用完成并且状态代码为200时，您会进行一些小的CSS调整，然后禁用droppable接收任何可拖动项目的能力。

您概述的问题是，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/

无法禁用jQuery droppable

1 个答案: