拖放检查答案

【问题标题】：Drag and drop checking拖放检查
【发布时间】：2018-01-15 07:50:18
【问题描述】：

我想检查被丢弃的是否是正确的答案，当所有东西都被丢弃在正确的可丢弃区域时，它会提醒一些东西。

正确答案 - drop1 (droppable) & ans1 (draggable item) 和 drop2 (droppable) & ans2 (draggable item) - 一旦两个条件都满足，警报就会弹出。但是我好像做不到。

HTML：

//droppable area

<div id="drop1" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
<div id="drop2" class="b2" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>

//draggable item

<div id="ans2" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
a change
</div>

<div id="ans1" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
chemical reaction system
</div>

jquery：

        $("#drop1, #drop2).droppable({
                drop: function (event, ui) {

                    var div = event.target.id;
                    var element = ui.draggable.attr('id');

                    if ((element === "ans1" && div === "drop1") && (element === "ans2" && div === "drop2")) {
                        alert("success");

                    }
    }
});

【问题讨论】：

“ans1”的这些 div 是什么。你的问题和逻辑不完整
也许它能给你一些想法jsfiddle.net/Micio/p1x7tsf6从一个开始做，然后你将实现第二部分

标签： javascript jquery html drag-and-drop

【解决方案1】：

我们必须持久化可拖动元素以读取连续的drop。愿它有所帮助！

var arr = [];
var countOfItems = 1;

$("#ans1, #ans2").draggable({
  revert: "invalid",
  cursor: "move"
});

$("#drop1, #drop2").droppable({
  greedy: true,
  drop: function(event, ui) {
    var div = event.target.id;
    var element = ui.draggable.attr('id');
    arr.push({
      'key': div,
      'val': element
    });
    $("#" + element).addClass('someclass');
    //if div with class name 'someclass' is greater than the required no of div
    if ($('div.someclass').length > countOfItems) {
      var count = false;
      $.each(arr, function(i, obj) {
        if ((obj.val == "ans1" && obj.key == "drop1") || (obj.val == "ans2" && obj.key == "drop2")) {
          count = true;
        }
      });

      if (count) {
        console.log("Success")
      }
      else
      {
      console.log("Failure")
      }
    }
  }
});

.b1 {
  height: 60px;
  width: 160px;
  position: absolute;
  background-color: red;
  left: 30px;
  top: 30px;
}

.b2 {
  height: 60px;
  width: 160px;
  position: absolute;
  background-color: red;
  left: 280px;
  top: 30px;
}

#ans1 {
  background-color: yellow;
  width: 150px;
  height: 50px;
  position: absolute;
  border-radius: 8px 8px 8px 8px;
  left: 30px;
  top: 120px;
  box-shadow: 0px 0px 2px 1px yellow;
}

#ans2 {
  background-color: yellow;
  width: 150px;
  height: 50px;
  position: absolute;
  border-radius: 8px 8px 8px 8px;
  left: 280px;
  top: 120px;
  box-shadow: 0px 0px 2px 1px yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<div id="drop1" class="b1">drop1
</div>
<div id="drop2" class="b2">drop2
</div>



<div id="ans2">
  a change (ans2)
</div>

<div id="ans1">
  chemical reaction system (ans1)
</div>

【讨论】：