jQuery droppable 不能被禁用

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 调用是问题所在。让我们分解正在发生的事情：

1. 可拖动项目被放入可放置项目中
2. 您的 drop 方法将可拖动项目附加到可放置项目中
3. 您的 drop 方法然后执行 ajax 调用
4. 当 ajax 调用完成并且状态码为 200 时，您需要对 CSS 进行一些小的调整，然后禁用 droppable 接收更多可拖动项目的能力。

您概述的问题是 droppable 允许在其中放置超过 1 个可拖动项目。因此，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/