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

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

0 голосов
/ 02 июня 2018

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

Код: 

<!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>

Снимок экрана

For Reference

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

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

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

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

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

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

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

VanillaJS Div Collision Detection

Как обнаружить столкновение 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>

Надеюсь, это поможетвы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...