拖放检查

Question

我想检查丢弃的内容是否是正确答案，当所有内容都放在正确的可放置区域时，它会发出警告。

正确答案 - drop1（droppable）＆amp; ans1（可拖动项目）和drop2（可放置）＆amp; ans2（可拖动项目） - 一旦满足两个条件，警报就会弹出。但是我似乎无法做到。

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");

                    }
    }
});

Answer 1

我们必须坚持使用draggable元素来连续阅读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>