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.
Awaiting suggestions. Thanks in advance!
from Prevent drop event when it's already have child element ? Drag and Drop
No comments:
Post a Comment