拖放中的 div 的条件

我有 2 个可放置的div，称为 drop1 和 drop2，以及 2 个可拖动的元素，称为 ans1 和 ans2。我想在 ans1 在 drop1 内，ans2 在 drop2 内时发出警报。必须满足这两个条件(不关心哪个先满足(才能发出警报。

$("#ans1, #ans2").draggable({
revert: "valid",
cursor: "move"
});
$("#drop1, #drop2").droppable({
    drop: function (event, ui) {
    if ($("#ans1", $("#drop1")) && $("#ans2", $(".drop2"))) {
      alert("correct");
    }
});

<div id="drop1" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
<div id="drop2" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
</div>
<div id="ans2" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
 a change
</div>
<br/>
<div id="ans1" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
chemical reaction system
</div>

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://www.google.co.in/logos/doodles/2018/sergei-eisensteins-120th-birthday-5380775741489152.2-s.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

尝试使用accept选项并ui.draggable.text() droppable()函数

堆栈代码段

$(".drag-div>div").draggable({
  revert: "invalid",
  cursor: "move"
})
$(".drop-div>div").droppable({
  accept: ".drag-div>div",
  drop: function(event, ui) {
    $(this).text(ui.draggable.text());
    if ($("#drop1").text() == $("#ans1").text() && $("#drop2").text() == $("#ans2").text()) {
      alert("correct");
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="drop-div">
  <div id="drop1" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
  </div>
  <br/>
  <div id="drop2" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px">
  </div>
</div>
<br/>
<div class="drag-div">
  <div id="ans2" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
    a change
  </div>
  <br/>
  <div id="ans1" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px">
    chemical
  </div>
</div>

相关内容

最新更新

热门标签：