Javascript jQuery可拖动、可拖放查询
我希望构建一个类似于狐狸、鸡和燕麦游戏的web应用程序。谜语，你需要让每个人都过河，但不能把一些物品放在一起。 例如，我试着先拖动鸡肉（粉色方块到蓝色方块），然后拖动狐狸（红色方块）到蓝色方块，然后拿回鸡肉（粉色方块），放下粉色方块，把燕麦（黄色方块）放到蓝色方块。因此，我需要一个警报，例如，如果红色/粉色单独出现在同一侧，并且与粉色/黄色相同 以下是我目前的代码：Javascript jQuery可拖动、可拖放查询,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我希望构建一个类似于狐狸、鸡和燕麦游戏的web应用程序。谜语，你需要让每个人都过河，但不能把一些物品放在一起。 例如，我试着先拖动鸡肉（粉色方块到蓝色方块），然后拖动狐狸（红色方块）到蓝色方块，然后拿回鸡肉（粉色方块），放下粉色方块，把燕麦（黄色方块）放到蓝色方块。因此，我需要一个警报，例如，如果红色/粉色单独出现在同一侧，并且与粉色/黄色相同 以下是我目前的代码： <body> <div id="red-square">Fox</div> <
<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>
狐
对岸
燕麦
鸡
$（“#红方块”）.draggable（）；
$（“#粉红色圆圈”）.draggable（）；
$（“#黄色方形”）.draggable（）；
$（“#蓝色方形”）。可拖放({
drop：函数（事件、用户界面）{
警告（“否”）；
}
});
false$（函数（）{
函数findFox（）{
var$items=$（“.house”）.find（“.piece”）；
var-fox=false；
若有（$项）{
$items.每个（功能（i、el）{
if（$（el）.hasClass（“fox”））{
console.log（“Fox发现”）；
福克斯=真；
}
});
}
返回狐狸；
}
美元（“.piece”）。可拖动({
回复：真
});
$（“#蓝色方形”）。可拖放({
接受：“.piece”，
drop：函数（事件、用户界面）{
var$drag=ui.draggable；
var-fox=false；
如果（$drag.hasClass（“chicken”））{
fox=findFox（）；
}
如果（福克斯）{
返回false；
}否则{
$drag.attr（“样式”，“样式”）
。附于（$（本））；
}
}
});
});
.piece{
显示：内联块；
利润率：10px；
填料：1.5em 1em；
文本对齐：居中；
}
.房子{
位置：相对位置；
填充：1em；
高度：3em；
}
.房子.头衔{
位置：绝对位置；
顶部：10px；
左：10px；
}
瑞德先生{
边框：1px纯红；
背景：rgba（255,0,0,35）；
}
蓝先生{
边框：1px纯蓝色；
背景：rgba（0,025,35）；
}
黄先生{
边框：1px纯黄色；
背景：rgba（255,255,0,35）；
}
.粉红{
边框：1px纯红；
背景：rgba（170,0,20,35）；
}
狐
对岸
燕麦
鸡肉
您检查过活动了吗？：听起来你要找的是“停止”活动。看看这个例子，试着实现你自己的逻辑。编辑：也检查droppable的“drop”事件。我看到了，但我确定如果先拖动某个特定的正方形，我需要一个IF语句？一个更为复杂的例子：我正在看你的第一篇文章，它看起来正是我需要的。现在的想法是使用另一个IF语句IF（$drag.hasClass（“chicken”）{fox=findFox（）；}IF（fox）{return false；并使用IF has类“Oats”，chicken=findChicken，IF chicken，return false？@conye9980您可以创建各种函数，如findFox（）
，findChicken（）
和findGrain（）
。这取决于您。如果它们都返回true
或false
，那么您可以将它们与If语句一起使用，就像我在第一个示例中所做的那样。谢谢Twisty。这是一个很大的帮助！