Question

我有2个'draggable'div和2个'droppable'div。 Dragpable1 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代码。小提琴中提供了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

Jquery：.show（）div功能没有按预期工作？

1 个答案: