jQuery Draggable，Droppable查询

Question

我正在寻找一个类似于Fox，Chicken和Oats游戏的Web应用程序。 您需要让每个人穿越河流但不能将某些物品放在一起的谜语。 狐狸，鸡肉，燕麦

因此，我尝试先拖动例如鸡肉（粉红色正方形到蓝色正方形），然后将狐狸（红色正方形）拖动到蓝色，然后将鸡肉（粉红色）放回粉红色正方形，然后将燕麦（黄色）移到上方变成蓝色。 因此，例如，如果红色/粉红色最终只出现在同一侧且与粉红色/黄色相同时，我就需要发出警报。

到目前为止，这是我的代码：

    <body>
<div id="red-square">Fox</div>
<div id="blue-square">Other Side</div>
<div id="yellow-square">Oats</div>
<div id="pink-square">Chicken</div>

<script type="text/javascript">

    $("#red-square").draggable();
    $("#pink-circle").draggable();
    $("#yellow-square").draggable();
    $("#blue-square").droppable({
        drop: function( event, ui ) {
        alert("No");

    }

    });     

</script>

</body>

Answer 1

对于可拖动，如果放置返回false值，则要还原。 例如：

 $(function() { function findFox() { var $items = $(".house").find(".piece"); var fox = false; if ($items) { $items.each(function(i, el) { if ($(el).hasClass("fox")) { console.log("Fox Found."); fox = true; } }); } return fox; } $(".piece").draggable({ revert: true }); $("#blue-square").droppable({ accept: ".piece", drop: function(event, ui) { var $drag = ui.draggable; var fox = false; if ($drag.hasClass("chicken")) { fox = findFox(); } if (fox) { return false; } else { $drag.attr("style", "") .appendTo($(this)); } } }); });

 .piece { display: inline-block; margin: 10px; padding: 1.5em 1em; text-align: center; } .house { position: relative; padding: 1em; height: 3em; } .house .title { position: absolute; top: 10px; left: 10px; } .red { border: 1px solid red; background: rgba(255, 0, 0, .35); } .blue { border: 1px solid blue; background: rgba(0, 0, 255, .35); } .yellow { border: 1px solid yellow; background: rgba(255, 255, 0, .35); } .pink { border: 1px solid pink; background: rgba(170, 0, 20, .35); }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="red-square" class="red fox piece">Fox</div> <div id="blue-square" class="blue house"> <span class="title">Other Side</span> </div> <div id="yellow-square" class="yellow oat piece">Oats</div> <div id="pink-square" class="pink chicken piece">Chicken</div>

还有更多工作要做，但这可以帮助您解释基础知识。

jQuery Draggable，Droppable查询

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-01-29 22:27:13

jQuery Draggable，Droppable查询

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-01-29 22:27:13

解决方案1
1 已采纳 2018-01-29 22:27:13