Question

我有2个名为drop1和drop2的可放置div，以及2个名为ans1和ans2的可拖动元素。我想在ans1位于drop1内部并且ans2位于drop2内时发出警报。必须满足这两个条件（不关心首先满足哪些条件）才能发出警报。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

<!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>

Answer 2

尝试使用accept功能的ui.draggable.text()选项和droppable()

Stack Snippet

$(".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>

拖放中div的条件

2 个答案: