我正在寻找一个类似于Fox，Chicken和Oats游戏的Web应用程序。您需要让每个人穿越河流但不能将某些物品放在一起的谜语。
Fox, Chicken, Oats
因此，我尝试先拖动例如鸡肉（粉红色正方形到蓝色正方形），然后将狐狸（红色正方形）拖动到蓝色，然后将鸡肉（粉红色）放回粉红色正方形，然后将燕麦（黄色）移到上方变成蓝色。因此，例如，如果红色/粉红色最终只出现在同一侧且与粉红色/黄色相同时，我就需要发出警报。
到目前为止，这是我的代码：
<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>
最佳答案
对于可拖动，如果放置返回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>还有更多工作要做，但这可以帮助您解释基础知识。