代码之家 › 专栏 › 技术社区 › conye9980

jQuery可拖放查询

jquery-ui jquery javascript

conye9980 · 技术社区 · 7 年前

我希望构建一个类似于狐狸、鸡和燕麦游戏的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>

1 回复 | 直到 7 年前

Twisty 7 年前

对于draggable,如果drop返回 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>

还有很多事情要做,但这有助于解释基本情况。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

8 月前

Alex · 在轻量级中同时解构和不解构变量

8 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

8 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

user3472810 · Angular@Output/EventEmitter返回undefined

9 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

9 月前