当它已经有子元素时防止丢弃事件？拖放
Kee*_*san 13 javascript jquery html5 drag-and-drop
我正在做简单的配对游戏.游戏有很多问题.我正在使用拖放进行匹配.首先,我将图像元素放到一个容器中,当我选择另一个元素并尝试将其放入同一个容器时,目前它正在覆盖现有元素.我想检查已经有元素的容器.如果没有,则允许掉落,否则防止跌落.
码:
<!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 的冲突：
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>
我希望这可以帮助你。
我认为你真正的问题是你已经实施了allowDrop(event)，所以总是event.preventDefault()允许下降。
相反，您想要做的是在目标已被占用的情况下不允许掉落。尝试使用以下实现allowDrop()：
function allowDrop(event) {
var t = event.target;
// Find the drop target
while (t !== null && !t.classList.contains("target")) {
t = t.parentNode;
}
// If the target is empty allow the drop.
if (t && t.childNodes.length == 0) {
event.preventDefault();
}
return false;
}
这是一个显示其实际效果的小提琴。（我坦率地承认我是根据之前的答案借来的。:)
function allowDrop(event) {
var t = event.target;
// Find the drop target
while (t !== null && !t.classList.contains("target")) {
t = t.parentNode;
}
// If the target is empty allow the drop.
if (t && t.childNodes.length == 0) {
event.preventDefault();
}
return false;
}
let offset = [0, 0]
function allowDrop(ev) {
var t = ev.target;
while (t !== null && !t.classList.contains("target")) {
t = t.parentNode;
}
if (t && t.childNodes.length > 0) {
return false;
}
ev.preventDefault()
}
function drag(ev) {
ev.dataTransfer.setData('dragID', ev.target.id)
offset = [
ev.target.offsetLeft - ev.clientX,
ev.target.offsetTop - ev.clientY
]
}
function drop(ev) {
ev.preventDefault()
const data = ev.dataTransfer.getData('dragID')
ev.target.appendChild(document.getElementById(data))
}.target {
width: 100px;
height: 100px;
border: 1px solid #aaaaaa;
padding: 10px;
}
.element {
width: 100px;
height: 100px;
}