jQuery'；可拖动'；与'；一起使用时，图像并非全部处于活动状态；可下拉式'；插件（拖放交互）

我现在正在为一个班级项目建立一个网站，在“如何”部分，有四张麦片的图片，目前可以拖动

问题在于，当你把谷类食物滴到大猩猩的嘴里时，第一口谷类食物（'.c1'）是唯一能与滴下互动的食物。其他3位（.c2、.c3、.c4）根本不工作

在那之后，我想知道是否有任何方法可以让谷类食物在掉落后消失

以下是我的jQuery代码：

$(".c1, .c2, .c3, .c4").draggable();

$(".invis1").droppable({
            over: function() {
                    $('.game').hide();
                    $('.game2').show();
                    $('embed').remove();
                    $('body').append('<embed src="../sounds/sound2.mp3" autostart="true" hidden="true" loop="false">');
            }
    });

$(".invis2").droppable({
            over: function() {
                    $('.game2').hide();
                    $('.game3').show();
                    $('embed').remove();
                    $('body').append('<embed src="../sounds/sound2.mp3" autostart="true" hidden="true" loop="false">');
            }
    });

$(".invis3").droppable({
            over: function() {
                    $('.game3').hide();
                    $('.game4').show();
                    $('embed').remove();
                    $('body').append('<embed src="../sounds/sound2.mp3" autostart="true" hidden="true" loop="false">');
            }
    });

$(".invis4").droppable({
            over: function() {
                    $('.game4').hide();
                    $('.game5').show();
                    $('embed').remove();
                    $('body').append('<embed src="../sounds/sound2.mp3" autostart="true" hidden="true" loop="false">');
            }
    });

$（.c1.c2.c3.c4”）.draggable（）；
$（“.invis1”）.可拖放({
结束：函数（）{
$（'.game'）.hide（）；
$（'.game2'）.show（）；
$（'embed'）.remove（）；
$（'body'）。追加（''）；
}
});
$（“.invis2”）.可拖放({
结束：函数（）{
$（'.game2'）.hide（）；
$（'.game3'）.show（）；
$（'embed'）.remove（）；
$（'body'）。追加（''）；
}
});
$（“.invis3”）.可拖放({
结束：函数（）{
$（'.game3'）.hide（）；
$（'.game4'）.show（）；
$（'embed'）.remove（）；
$（'body'）。追加（''）；
}
});
$（“.invis4”）.可拖放({
结束：函数（）{
$（'.game4'）.hide（）；
$（'.game5'）.show（）；
$（'embed'）.remove（）；
$（'body'）。追加（''）；
}
});

• .c1、.c2、.c3、.c4=谷类食物
• .game divs=新的页面，一旦 麦片掉了
• .invi divs=大猩猩嘴上的不可见盒子/谷类碎屑掉落的目标

---

奇怪的是，我认为你的问题是因为用利润来定位你的“谷物”

试着这样做：

.c1 {
    position: relative;
    top:-100px;
    left:200px;
}
.c2 {
    position: relative;
    top:-200px;
    left:200px;
}
.c3 {
    position: relative;
    top:-200px;
    left:700px;
}
.c4 {
    position: relative;
    top:-100px;
    left:700px;
}

要在谷类食物被“吃掉”后隐藏它：

---

注意：我在看到你关于边距的评论之前就开始写这篇文章了…

当然，你看：它依赖于可拖动/可拖放插件，但不确定它是否有任何帮助（对不起，今天是我第一次在这里发帖，也是我第一次制作这些小提琴的东西）没关系，让它工作吧。我不得不去掉利润，结果成功了。我仍然不知道如何让它们在被拖到目标后消失。太棒了，如果你能得到它，请告诉我。不管怎样，谢谢你的努力！在fiddle示例中肯定可以使用，但是当我将它添加到我的站点时，它不再拖动（除非它消失了）。有什么想法吗？@PhillipNguyen尝试删除

宽容：“触摸”，结果仍然一样。还有什么我可以提供给你的帮助吗？@PhillipNguyen对不起，伙计。。。drop函数不应该在它没有被droppedi调用时启动，但它给了我相同的结果。目前，我恢复了c1、c2等部件的绝对定位（因此我知道定位不会影响误差）。
$(".c1, .c2, .c3, .c4").draggable({
    start: function (event, ui) {
        $(this).addClass('hide');
    }
});

$(".invis1").droppable({
    tolerance: "touch",
    drop: function () {
        $('.hide').hide();
    }
});