我有 2 个称为 drop1 和 drop2 的可放置 div，以及 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>关于javascript - 拖放中 div 的条件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48375278/