Question

我对j Query UI非常陌生。我试图设计一个拖放游戏。我在堆栈溢出中查看了很多答案，但没有得到非常相似的例子（或者我可能无法弄清楚）。
基本上，我试图做一个回收游戏，你可以将不同的项目拖放到回收站或垃圾桶。实际上所有的跨度都是图像。我的意思是将这些箱子并排放置，CSS之前用于图像，但现在不适用于跨度。

这是小提琴。拖动工作在我的浏览器上，但不适合小提琴。

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

[code, it's all in fiddle]

我想要的是两件事：

1.当我将物品放入任何一个箱子时，如何使我的物品消失？

2.如何计算正确答案并在完成游戏后显示总分？

还有为什么它在本地运作而不是小提琴？

我有一个逻辑，我应该计算距离（data-x / y）并匹配bin和items的类/数据类型，但是编码时遇到了麻烦。

有什么建议吗？任何提示都会非常感激！

Answer 1

这是一个有效的JSFiddle。

<强> 1。当我将它们丢弃在任一个箱子中时，如何使我的物品消失？

查看.drop()

0

要仅在元素位于其中一个区域时隐藏元素，您可以使用accept选项。

<强> 2。如何计算正确答案并在完成游戏后显示总分？

您可以初始化得分draggable，并在每次droppable接受$(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()); }时递增。

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();
        }
    });

结合可放置代码

<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>

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

HTML应该是这样的：

.recyclable

请注意＆＃34; .notrecyclable＆＃34;和＆＃34; drag-item＆＃34;是#recyclebin的类和那个＆＃34; #trashbin＆＃34;和＆＃34; dropzone-container＆＃34;是accept的ids。

这使您可以正确使用droppable对象的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选项。

第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/ui/1.11.4/jquery-ui.js'. This request has been blocked; the content must be served over HTTPS.
<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>

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

HTML中的脚本标记应为：

longName

以下是控制台中错误的完整输出：

Imgur

<强>资源

对于后续步骤，请查看

的JQuery UI文档

希望有所帮助！

得分如果拖放到正确的类别并使img消失拖放Jquery游戏

1 个答案: