Fatal编程技术网
  • javascript/
  • Javascript 当事件已经有子元素时，是否阻止丢弃事件？拖放

Javascript 当事件已经有子元素时，是否阻止丢弃事件？拖放

javascript jquery html

Javascript 当事件已经有子元素时，是否阻止丢弃事件？拖放,javascript,jquery,html,drag-and-drop,Javascript,Jquery,Html,Drag And Drop,我在做简单的配对游戏。这个游戏有多个问题。我使用拖放进行匹配。首先，我将把image元素放到一个容器中，当我选择另一个元素并尝试将它放到同一个容器中时，它当前正在覆盖现有的元素。我想检查容器，它已经有元素了。如果没有，让它下降，否则防止下降 代码： 截屏 当容器已经有子元素时，我想阻止drop事件。同时，当任何一个容器为交换而清空时，我需要重新排列删除的元素 实际上我想把图像从左容器拖到右容器。在将元素放到右边的容器之前，我想检查容器是否已经有另一个之前被丢弃的图像。如果容器中没有图像，请允许删

我在做简单的配对游戏。这个游戏有多个问题。我使用拖放进行匹配。首先，我将把image元素放到一个容器中，当我选择另一个元素并尝试将它放到同一个容器中时，它当前正在覆盖现有的元素。我想检查容器，它已经有元素了。如果没有，让它下降，否则防止下降

代码：

截屏

当容器已经有子元素时，我想阻止drop事件。同时，当任何一个容器为交换而清空时，我需要重新排列删除的元素

实际上我想把图像从左容器拖到右容器。在将元素放到右边的容器之前，我想检查容器是否已经有另一个之前被丢弃的图像。如果容器中没有图像，请允许删除图像，否则请防止删除图像

等待建议。提前谢谢

我想你能检查元素之间的冲突并决定你的行动吗

按照示例链接查看使用vanilla javascript和jquery是否存在冲突：

我希望这能对您有所帮助。

我认为您真正的问题是，您已经将allowDropevent实现为event.preventDefault，因此始终允许删除

相反，您要做的是，在目标已被占用的情况下，不允许下降。尝试使用allowDrop的以下实现：

这里有一个例子可以说明这一点。根据前面的回答，我自由地承认我借用了：

设偏移量=[0，0] 函数allowDropev{ var t=电动汽车目标； 而t！==null&&！t.classList.containstarget{ t=t.parentNode； } 如果t&&t.childNodes.length>0{ 返回false； } 防止违约 } 函数dragev{ ev.dataTransfer.setData'dragID'，ev.target.id 偏移量=[ ev.target.offsetLeft-ev.clientX， ev.target.offsetTop-ev.clientY ] } 函数dropev{ 防止违约 const data=ev.dataTransfer.getData'dragID' ev.target.appendChilddocument.getElementByIddata } .目标{ 宽度：100px； 高度：100px； 边框：1px实心AAAAA； 填充：10px； } .元素{ 宽度：100px； 高度：100px； }
无法理解，请提供代码片段以便我理解。@KinjalAkhani，检查我提供的有问题的代码。实际上我想把图像从左容器拖到右容器。在将元素放到右边的容器之前，我想检查容器是否已经有另一个之前被丢弃的图像。如果容器中没有图像，请允许删除图像，或者阻止删除。注意：回滚了一个甚至没有使用我的代码建议的代码段。 
<!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>

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

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;
}