Я делаю простую игру. В игре много вопросов. Я использую 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, когда контейнер уже имеет дочерние элементы. В то же время мне нужно переставить сброшенные элементы, когда какой-либо один контейнер пуст для замены.
На самом деле я хочу перетащить изображение из левого контейнера в правый контейнер. перед тем как отбросить элемент в правый контейнер, я хочу проверить, есть ли у контейнера еще одно изображение, которое раньше было раньше. если в контейнере нет изображения, разрешите отбросить изображение или не удалите изображение.
В ожидании предложений. Заранее спасибо!