0

我对 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);
    }
});
4

1 回答 1

0

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/

于 2012-10-05T05:22:35.267 回答