javascript - Jquery:.show() div 功能未按预期工作？

Question

我有 2 个“可拖动”div 和 2 个“可放置”div。 Draggable1 div 应该被 droppable1 div 接受，依此类推。此功能有效。
如果 draggable1 div 被删除，它会显示另一个具有 id 'hide' 的 'success' div。但是，当我尝试检查两个可拖动对象是否分别被删除时，它不再显示 ID 为“hide2”的新“成功”div。

这是一个 jsfiddle:https://jsfiddle.net/g27t7hey/

<div class="wrap">
<div class="draggables" id="draggable1"></div><br>
<div class="draggables" id="draggable2"></div><br>
</div>

<div class="wrap2">
<div class="droppables" id="droppable1"></div>
<div class="droppables" id="droppable2"></div>
</div>

<div id="hide" style="display:none"></div>
<div id="hide2" style="display:none"></div>  

以上是html代码。 fiddle 中提供了 CSS 和 JS 代码。

我想知道为什么它不能同时用于 2 个 div？任何帮助，将不胜感激。

更新:
考虑到 T J 的回答和他更新的代码，我进一步更新了代码以显示我正在寻找的内容:https://jsfiddle.net/g27t7hey/2/

Answer 1

您的代码包含如下语句:

 else if (draggableID=='draggable1' && droppableID=='droppable1' && draggableID=='draggable2' && droppableID=='droppable2') 

我不确定您在想什么，但是一个变量不能同时有两个值。

draggableID 将是 draggable1 或者是 draggable2，所以上面的计算结果不会为真。

当您放下一个元素时，回调将执行并且 draggableID 将被设置为被放置元素的 id。它不包含来自先前函数调用的任何值。

此外，您似乎多次初始化与 draggable 相同的元素。您在上一次初始化中设置的任何选项都将被下一次初始化覆盖。

而且你似乎也有很多重复的代码。

如果我理解正确的话，你想要做的事情可以这样实现:

$(function() {
  $('#draggable1, #draggable2').draggable({
    containment: 'document',
    revert: function(event, ui) {
      // return boolean
      return !event;
    }
  });
  $('#droppable1,#droppable2').droppable({
    tolerance: "touch",
    accept: function(draggable) {
      var id = $(this).attr('id').split('droppable')[1];
      var targetId = draggable.attr('id').split('draggable')[1];
      return id == targetId
    },
    drop: leftDrop
  });

  function leftDrop(event, ui) {

    ui.draggable.appendTo(this).position({
      of: $(this),
      my: 'center',
      at: 'center'
    });
    var draggableID = ui.draggable.attr("id");
    if (draggableID == 'draggable1') $('#hide').show();
    if (draggableID == 'draggable2') {
      if ($('#draggable1').parent().is('#droppable1')) $('#hide2').show();
    }
  }
});

html,
body {
  margin: 0;
  padding: 0;
}
.wrap {
  width: 200px;
  height: 200px;
  background: #e3e3e3;
  position: relative;
  top: 80px;
  margin-left: 0px;
}
.wrap2 {
  width: 0px;
  height: 0px;
  background: #e3e3e3;
  position: relative;
  top: -300px;
  left: 700px;
  margin: 0px;
  padding: 0px;
  opacity: 0.2;
}
.draggables {
  width: 20px;
  height: 20px;
  position: absolute;
}
.droppables {
  width: 60px;
  height: 60px;
  position: absolute;
}
#draggable1 {
  background: #003366;
  left: 10px;
  top: 10px;
}
#draggable2 {
  background: #ffff00;
  top: 160px;
  left: 60px;
}
#droppable1 {
  background: #0000FF;
  top: 200px;
  left: -400px;
}
#droppable2 {
  background: #008080;
  left: -300px;
  top: 200px;
}
#hide {
  width: 50px;
  height: 10px;
  background: #00cc00;
  position: absolute;
  top: 350px;
}
#hide2 {
  width: 50px;
  height: 10px;
  background: #ff0000;
  position: absolute;
  top: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<div class="wrap">
  <div class="draggables" id="draggable1"></div>
  <br>
  <div class="draggables" id="draggable2"></div>
  <br>
</div>
<div class="wrap2">
  <div class="droppables" id="droppable1"></div>
  <div class="droppables" id="droppable2"></div>
</div>
<div id="hide" style="display:none"></div>
<div id="hide2" style="display:none"></div>

---

已更新 fiddle