Menu
I am doing the simple matching game. The game has multiple question. I am using drag and drop for matching. First of all, I'll drop the image element to one container, when I select another element and try to drop it into the same container, currently it's overwriting the existing element. I want to check the container, which already has the element. If it doesn't have, allow that to drop, otherwise prevent the drop.
Code:
<!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>
Screen Shot
I want to prevent the drop event, when container already has child elements. In the same time I need to rearrange the dropped elements, when any one container empty for swapping.
Actually i want to drag the image from left container to right container. before dropping the element to right container, i want to check if container already have another image which dropped before. if there is no image in container, allow to drop the image, or else prevent dropping the image.
Awaiting suggestions. Thanks in advance!
277
I think your real problem is that you've implemented allowDrop(event) as event.preventDefault() so a drop is always permitted.
Instead what you want to do is disallow a drop in a case where the target is already occupied. Try using the following implementation of 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;
}
Here's a fiddle that shows it in action. (I freely acknowledge I borrowed based on the previous answer. :)
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;
}<div class="target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="element" id="drag1" style="background: blue;" draggable="true" ondragstart="drag(event)"></div>
<div class="element" id="drag2" style="background: red;" draggable="true" ondragstart="drag(event)"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
