如果拖放到正确的类别并使图像消失，则得分 Drag & Drop Jquery 游戏

Question

我是 j Query 的新手 UI。我试图设计一个拖放游戏。我在堆栈溢出中查看了很多答案，但没有得到非常相似的例子（或者我想不通）。
基本上，我尝试做一个回收游戏，您可以将不同的物品拖放到回收站或垃圾箱中。所有的跨度实际上都是图像。我打算将这些垃圾箱并排放置，CSS 以前适用于图像但现在不适用于跨度。

这是它的 fiddle。拖动在我的浏览器上有效，但在 fiddle.

中无效

https://jsfiddle.net/92dty8cq/9/

[code, it's all in fiddle]

我想弄清楚的是两件事：

1.How 让我的物品在我将它们放入任一垃圾箱时消失？

2.How游戏结束后统计正确答案并显示总分？

以及为什么它在本地有效但在 fiddle 上无效？

我有一种逻辑，我应该计算距离 (data-x/y) 并匹配垃圾箱和物品的 classes/data-type，但在编码时遇到了问题。

有什么建议吗？任何提示将不胜感激！

Answer 1

这是一个有效的 JSFiddle。

1.当我将物品放入任一垃圾箱时，如何让它们消失？

查看 .drop()

draggable

要仅当元素位于任一容器中时才隐藏元素，您可以使用 accept 选项。

2。游戏结束后如何计算正确答案并显示总分？

您可以初始化 0 的分数，并在每次 droppable 接受 draggable 时增加它。

$(function () {

    // set the initial score to 0
    var score = 0;
    // and put it into the html
    $("#score").find("span").html(score);

    // increment score
    var incrementScore = function() { 
        return ++score;
    }

    // update the score after calling the incrementScore() func
    var updateScoreHtml = function() {
        $("#score").find("span").html(incrementScore());
    }

对于draggable，添加一个hide()方法，

  $(".drag-item").draggable({
      hide: function() {
        $(this).hide();   
      }
  });

结合可投放代码，

    $(".dropzone#recyclebin").droppable({
        accept: ".recyclable",
        // if there is an accepted drop...
        drop: function (event, ui) {
            // call the hide() method of the draggable
            ui.draggable.hide();
            // and update the score.
            updateScoreHtml();
        }
    });

...实现您正在寻找的东西。

HTML应该是这样的：

<div id="graphic-container">
    <div id="draggable-container">
        <div class="drag-item recyclable">
            <p>Glass Bottle</p>
        </div>
        <div class="drag-item notrecyclable">
            <p>Mirror</p>
        </div>
        <div class="drag-item recyclable">
            <p>Paper</p>
        </div>
    </div>
    <div id="dropzone-container">
        <div id="recyclebin" class="dropzone">Recycle Bin</div>
        <div id="trashbin" class="dropzone">Trash Bin</div>
    </div>
</div>

请注意，对于 drag-item，“.recyclable”和“.notrecyclable”是类，而“#recyclebin”和“[=26] =]" 是 dropzone-container 的 ID。

这允许您正确使用 droppable 对象的 accept 选项。

3。为什么它在 JSFiddle 上不起作用？

要了解为什么拖动在 JSFiddle 上不起作用，请查看浏览器中的 JavaScript 控制台。您将看到以下两个错误：

Mixed Content: The page at 'https://fiddle.jshell.net/92dty8cq/9/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.10.2.js'. This request has been blocked; the content must be served over HTTPS. fiddle.jshell.net/:1
Mixed Content: The page at 'https://fiddle.jshell.net/92dty8cq/9/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/ui/1.11.4/jquery-ui.js'. This request has been blocked; the content must be served over HTTPS.

发生这种情况的原因是因为 JSFiddle 是一个安全页面（通过 HTTPS），但您将这两个脚本作为不安全资源（通过 HTTP）包括在内。

您 HTML 中的脚本标签应该是：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

这里是控制台中错误的完整输出：

资源

对于后续步骤，请查看 JQuery UI 文档

希望对您有所帮助！

如果拖放到正确的类别并使图像消失，则得分 Drag & Drop Jquery 游戏

Score if drag&drop to the right category and make img disappear Drag&drop Jquery game

drag-and-drop

jquery-ui

jquery-ui-draggable