jQuery Draggable，Droppable查詢
[英]jQuery Draggable, Droppable query
問題描述
我正在尋找一個類似於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>
1 個解決方案
解決方案1
1 已采納 2018-01-29 22:27:13
對於可拖動，如果放置返回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與多個Draggable
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.