为什么 jQuery 的 droppable 和 draggable 不能按预期工作？答案

【问题标题】：Why droppable and draggable of jQuery are not working as expected?为什么 jQuery 的 droppable 和 draggable 不能按预期工作？
【发布时间】：2016-06-09 13:57:14
【问题描述】：

谁能告诉我为什么第二个 if 语句条件满足。

这里是代码

$("#car").draggable({
    start: function(event, ui) {
        if (!done) return false;
    },
    stop: function(event, ui) {
        if (counter >= 40 && $(".correct").length == $(".drop").length) {
            setTimeout(function() {
                $('#win').text(winner +' '+ 'stars' + ' ' + 'earned' + ' Completion time' + ' ' + counter + ' seconds');
            }
        }
    }
});

// for droppable...
$("#carDrop").droppable({
    accept: "#car",
    drop: function(event, ui) {
        if(ui.draggable.is("#car")){
            $(this).addClass("correct");

            ui.draggable.fadeOut(500);
            $(this).fadeOut(500,function(){

            });
        }
    }
});

我使用警告框检查了.correct 和.drop 的长度，.correct 的长度为 8，.drop 的长度为 5。但是当我拖动图像并放下它时，第二个 if声明有效，没有意义。 Here is fiddle。它在小提琴中不起作用。我认为fiddle中的框架有问题。

【问题讨论】：

如果你能具体到你想要什么，那就太好了。你能做一个你的问题的小演示，而不是复制粘贴jsfiddle中的所有代码。我认为所有人都不愿意通过整个代码。这就是你到现在还没有收到任何答复的原因

标签： javascript jquery html css jquery-ui

【解决方案1】：

在droppable 的drop 事件之前不会触发draggable 的stop 事件吗？这可以解释为什么没有 .correct 类导致该语句评估为 'undefined' == 'undefined' 并因此 true。

【讨论】：

我在 if 语句后面放了警告框，并检查了 8 和 5 类的长度
我尝试在 droppable 的 drop 中正确删除 add 类，但 if 语句不起作用。这意味着droppable的drop首先被触发
令人惊讶的是，这是我本周第三次看到同样的问题。它是作业的一部分吗？
是的，因为没有人回答。那么它的工作，但我需要解释代码。这是我唯一不明白的部分

【解决方案2】：

尝试将您的第二个条件用括号括在 if 语句中，如下所示：

if (counter >= 40 && ($(".correct").length == $(".drop").length)) {

这是因为$([selector]).length 实际上是true

【讨论】：

if 语句仍然有效。它不应该工作
也许可以试试 console.log([values you want to check]) 代替 alert()。它中断更少，让您可以观察数字的变化......
您的浏览器中是否打开了开发者工具？你能看到控制台吗？它不会像alert() 那样弹出窗口。