代码之家 › 专栏 › 技术社区 › 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>

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

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前