Предотвратить событие drop, когда у него уже есть дочерний элемент? Перетаскивание

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

На самом деле я хочу перетащить изображение из левого контейнера в правый контейнер. перед тем как отбросить элемент в правый контейнер, я хочу проверить, есть ли у контейнера еще одно изображение, которое раньше было раньше. если в контейнере нет изображения, разрешите отбросить изображение или не удалите изображение.

В ожидании предложений. Заранее спасибо!

Ответ 1

Я думаю, что вы можете проверить конфликт между элементами и принять решение о своих действиях

следуйте ссылке на пример, чтобы увидеть, есть ли столкновение с использованием javascript и jquery ванили:

Обнаружение столкновений Vanilla JS Div

Как обнаружить div-столкновение в моем случае?

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>

Я надеюсь, это поможет вам.

Ответ 2

Я думаю, что ваша настоящая проблема заключается в том, что вы внедрили 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;
}

Здесь скрипка, которая показывает это в действии. (Я свободно признаю, что я позаимствовал на основе предыдущего ответа. :)

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>