我正在做简单的配对游戏。游戏有多个问题。我正在使用拖放进行匹配。首先，我会将图像元素放到一个容器中，当我选择另一个元素并尝试将它放到同一个容器中时，目前它正在覆盖现有元素。我想检查已经有元素的容器。如果没有，允许它掉落，否则阻止掉落。
代码:
<!DOCTYPE HTML>
<html>
<head>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="manage/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Styles -->
<link href="css/style.css" rel="stylesheet">
<script src="manage/js/jquery-2.1.4.min.js"></script>
<style>
.left, .right {
float: left;
width: 100px;
height: 35px;
margin: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Matching the following</h2>
<div class = "container-fluid">
<div class="row">
<div class = "col-md-2">
Option A
</div>
<div class = "col-md-1">
<div class="left" id="left_1">
<img src="manage/images/login.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
</div>
<div class = "col-md-4">
</div>
<div class = "col-md-1">
<div id="right_1" class="right" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
<div class = "col-md-2">
Option B Matching
</div>
</div>
<div class="row">
<div class = "col-md-2">
Option B
</div>
<div class = "col-md-1">
<div class="left" id="left_2">
<img src="manage/images/login.png" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31">
</div>
</div>
<div class = "col-md-4">
</div>
<div class = "col-md-1">
<div class="right" id="right_2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div>
<div class = "col-md-2">
Option A Matching
</div>
</div>
</div>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
var rightId = event.target.id;
console.log("before"+($("#"+rightId).children().length));
if($("#"+rightId).children().length == 0){
console.log($("#"+rightId).children().length);
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
console.log("after"+($("#"+rightId).children().length));
}
</script></body></html>
屏幕截图
当容器已经有子元素时，我想阻止 drop 事件。同时，当任何一个容器为空以进行交换时，我需要重新排列放置的元素。
实际上我想将图像从左侧容器拖到右侧容器。在将元素放到正确的容器之前，我想检查容器是否已经有另一个之前删除的图像。如果容器中没有图像，则允许删除图像，否则阻止删除图像。
等待建议。提前致谢!
最佳答案
我认为你能检查元素之间的碰撞并决定你的行动吗
使用 vanilla javascript 和 jquery 使用示例链接查看是否存在冲突:
Vanilla JS Div Collision Detection
How to detect div collision in my case?
https://jsfiddle.net/jeanwfsantos/bp57zgrL/
<style>
#div1 {
width: 100px;
height: 100px;
border: 1px solid #aaaaaa;
padding: 10px;
}
.element {
width: 100px;
height: 100px;
}
</style>
<div
id="div1"
ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<div
class="element"
id="drag1"
style="background: blue;"
draggable="true"
ondragstart="drag(event)"
ondrag="dragMove(event)"></div>
<div
class="element"
id="drag2"
style="background: red;"
draggable="true"
ondragstart="drag(event)"
ondrag="dragMove(event)"></div>
<script>
const elements = document.querySelectorAll('.element')
let hasCollision = false
let offset = [0, 0]
function allowDrop(ev) {
ev.preventDefault()
}
function drag(ev) {
ev.dataTransfer.setData('text', ev.target.id)
offset = [
ev.target.offsetLeft - ev.clientX,
ev.target.offsetTop - ev.clientY
]
}
function drop(ev) {
ev.preventDefault()
const data = ev.dataTransfer.getData('text')
if (!hasCollision) {
ev.target.appendChild(document.getElementById(data))
}
}
function dragMove(e) {
hasCollision = Array.prototype.some.call(elements, d => {
if (d.id !== e.target.id) {
return isCollide(e, d)
}
return false
})
}
function isCollide(a, b) {
const aRect = a.target.getBoundingClientRect()
const bRect = b.getBoundingClientRect()
return !(
((a.clientY + offset[1] + aRect.height) < (bRect.top)) ||
(a.clientY + offset[1] > (bRect.top + bRect.height)) ||
((a.clientX + offset[0] + aRect.width) < bRect.left) ||
(a.clientX + offset[0] > (bRect.left + bRect.width))
)
}
</script>
希望对你有帮助
关于javascript - 当它已经有子元素时防止放置事件？拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50660597/