时间戳

首页 > 解决方案 > 不允许拖动两个对象来清空 div

javascript - 不允许拖动两个对象来清空 div

问题描述

我为自己设定了为幼儿制作一些简单游戏的任务，以帮助他们赶上进度。我拖着我过去的编程日子。令人惊讶的是你忘记了多少，改变了多少！我一直很享受它并且喜欢解决问题。

我已经到了一个我不明白的地步。

我有 10 个计数器，它们都是单独的计数器，包含在页面顶部的一个 div 中。我有 10 个空的 div 框来拖动计数器。我设法将计数器拖到空的 div 上。问题是我不希望孩子们能够将多个柜台拖到一个盒子上。

我在这里发现了一个类似的问题并提出了建议（这是有道理的） - 检查 div 是否有任何子节点。如果没有，那么您可以删除计数器。如果是，则显示错误消息。

但是现在发生的事情是，如果我拖动一个计数器，它会留在框中。它还允许我将另一个计数器拖到同一个框（似乎只是替换第一个计数器）。它虽然不允许我拖动第三个计数器。当我尝试这样做时，它会显示错误。

我试图在错误中显示子节点的数量，并且它仅在将第二个计数器放入 div 框后才注册一个子节点。

为什么它允许我拖动第二个计数器。几乎就像它不承认第一个反阻力是孩子一样。

任何帮助表示赞赏。你会让我开心的！

function onDragStart(event) {
    event.dataTransfer.setData('text/plain', event.target.id);
  }

function onDragOver(event) {
    event.preventDefault();
  }

function onDrop(event) {

    event.preventDefault();
    var id = event.dataTransfer.getData('text');
    
    if (event.target.hasChildNodes()) {alert("That is not possible")} else {   
        event.target.appendChild(document.getElementById(id))}

    event.dataTransfer.clearData();
 
  }

这是HTML。对不起，我没有添加它。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Ten Frame Example</title>
</head>
<body onload="generateRandomNumber ()">
    
    <div id = "counterStore" ondragover="onDragOver(event);" ondrop="onDrop(event)"">
        <p>
            <img src="counter.png" id = "counterOne" height = "100" width = "100" draggable = "true" ondragstart="onDragStart(event);">
            <img src="counter.png" id = "counterTwo" height = "100" width = "100" draggable = "true" ondragstart="onDragStart(event);">
            <img src="counter.png" id = "counterThree" height = "100" width = "100" draggable = "true" ondragstart="onDragStart(event);">
            <img src="counter.png" id = "counterFour" height = "100" width = "100" draggable = "true" ondragstart="onDragStart(event);">
            <img src="counter.png" id = "counterFive" height = "100" width = "100" draggable = "true" ondragstart="onDragStart(event);">
            <img src="counter.png" id = "counterSix" height = "100" width = "100" draggable = "true" ondragstart="onDragStart(event);">
            <img src="counter.png" id = "counterSeven" height = "100" width = "100" draggable = "true" ondragstart="onDragStart(event);">
            <img src="counter.png" id = "counterEight" height = "100" width = "100" draggable = "true" ondragstart="onDragStart(event);">
            <img src="counter.png" id = "counterNine" height = "100" width = "100" draggable = "true" ondragstart="onDragStart(event);">
            <img src="counter.png" id = "counterTen" height = "100" width = "100" draggable = "true" ondragstart="onDragStart(event);">
      </p>
    </div>

    <p> <h1>Drag <span id="myRandomNumber"></span> counters to the ten frame</h1></p>
    
    <div class="divTable tenFrame">
        <div class="divTableBody">
            <div class="divTableRow">
                <div class="divTableCell" id = "cellOne" ondragover="onDragOver(event);" ondrop="onDrop(event);"></div><div class="divTableCell" id = "cellTwo" ondragover="onDragOver(event);" ondrop="onDrop(event);"></div><div class="divTableCell" id = "cellThree" ondragover="onDragOver(event);" ondrop="onDrop(event);"></div><div class="divTableCell" id = "cellFour" ondragover="onDragOver(event);" ondrop="onDrop(event);"></div><div class="divTableCell" id = "cellFive" ondragover="onDragOver(event);" ondrop="onDrop(event);"></div>
            </div>
            <div class="divTableRow">
                <div class="divTableCell" id = "cellSix" ondragover="onDragOver(event);" ondrop="onDrop(event);"></div><div class="divTableCell" id = "cellSeven" ondragover="onDragOver(event);" ondrop="onDrop(event);"></div><div class="divTableCell" id = "cellEight" ondragover="onDragOver(event);" ondrop="onDrop(event);"></div><div class="divTableCell" id = "cellNine" ondragover="onDragOver(event);" ondrop="onDrop(event);"></div><div class="divTableCell" id = "cellTen" ondragover="onDragOver(event);" ondrop="onDrop(event);"></div>
            </div>
        </div>
    </div>
    <p></p>
    <button type="button" onclick="myFindTotal()">Click to check if you are correct</button>

    <div id ="Results">
        This is where the result will be displayed
    </div>
    <script src="script.js"></script>
</body>
</html>

这是CSS - 认为问题必须在这里。我从其中一个 html 生成器中复制了它。


div.tenFrame {
    border: 2px solid #000000;
    background-color: #FFFFFF;
    width: 600px;
    height: 240px;
    text-align: left;
    
    
    
  }
  .divTable.tenFrame .divTableCell, .divTable.tenFrame .divTableHead {
    border: 1px solid #000000;
    width: 20%;
    height: 50%;
    object-fit: cover;
    vertical-align: middle;
    text-align: center;
}

  .tenFrame.outerTableFooter .tableFootStyle {
    padding: 3px 5px; 
  }
  .divTable{ display: table; }
  .divTableRow { display: table-row; }
  .divTableHeading { display: table-header-group;}
  .divTableCell, .divTableHead { display: table-cell;}
  .divTableHeading { display: table-header-group;}
  .divTableFoot { display: table-footer-group;}
  .divTableBody { display: table-row-group;}

  #counterStore {
      background-color: gray;
      width: 550px;
      height: 250px;
      position: relative;
    }

标签： javascripthtmlcss

解决方案

感谢您发布 HTML。

您发布的 HTML 存在一些问题：

  • counterstorediv 在 onDrop 事件上有两个结束演讲标记 ： ondrop="onDrop(event)""

  • h1标签内也不能有p标签。它可能在某些浏览器中有效，但无效。

  • 在 onDrop 处理程序中，您没有按 ID 过滤，也没有检查相关的 nodeType

解决这些问题后，我无法重现您遇到的问题。

这是一个显示它工作的 jsFiddle：https ://jsfiddle.net/odL19462/

我强烈建议使用 IDE 进行开发！它会检测到这些问题。我更喜欢 PHPStorm，但也有像 VSCode 这样的免费替代品。

（我添加了一些样式，因为没有 css。我还实现了将它们拖回商店）。

推荐阅读