Question

我正在寻找类似于Fox，Chicken和Oats游戏的网络应用程序。你需要让每个人穿过一条河而不能将一些物品放在一起的谜语。 Fox, Chicken, Oats

所以我试图先将鸡肉（粉红色方块）拖到蓝色方块上，然后将狐狸（红色方块）拖到蓝色，然后将鸡肉（粉红色）放回粉红色方块并带上燕麦（黄色）到蓝色。所以我需要一个警告，例如红色/粉红色单独在同一侧和粉红色/黄色相同。

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

var finalURL = "https://www.googleapis.com/youtube/v3/search?key="+this.API+"&channelId="+this.channelID+"&part=snippet,id&order=date&maxResults="+this.result+"";

Answer 1

对于draggable，如果drop返回false值，则需要还原。例如：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

还有更多工作要做，但这有助于解释基础知识。

jQuery Draggable，Droppable查询

1 个答案: