如何使用 if/else 语句编写 javascript 函数来检查 <div> 类是否包含 <img> 或 <img> 类

Question

我正在尝试使用拖放功能制作网页。该页面旨在让用户将图像（我制作了两个类，一个称为“sails”，另一个称为“boats”）到一个 div（名为“dropbox”和“dropbox2”的类）。

我遇到的问题是，如果用户将图像拖放到已经包含图像的可放置 div 中，则其中一个图像会消失并且无法恢复。

为了解决这个问题，我相信我需要使用 if/else 语句创建一个函数来检查 div 是否包含图像。如果是这样，那么我希望拖放功能保持其默认设置，这样它就不会落入 div 并从用户那里消失。否则，它会执行我已经拥有的代码，关闭默认性质，以便它可以放入 div。

if (**div contains an img**) {
  **keep the default nature so that it doesn't drop into the div**
} else {
  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
}

我如何描述条件以便我可以检查 div 是否包含图像，如果条件为真，我如何描述代码块以不允许图像放入该 div？

还是我以错误的方式解决了这个问题？这对我来说似乎合乎逻辑，但我没有经验。

这里是我的这个项目的 codepen 的链接：

https://codepen.io/Pacman0006/pen/vYEWppe

任何帮助将不胜感激:)

Answer 1

您需要在drop 函数本身中写入您的条件。

你可以这样做：

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");

    // check if the target container has an image already
    var targetHasImage = ev.target.querySelector('img');

    // check if the target container is not an image
    var targetIsImage = ev.target.tagName === 'IMG'

    // add the image if the target does not have an image and is not an image itself
    if (!targetHasImage && !targetIsImage) {
        ev.target.appendChild(document.getElementById(data));
    }
}

Answer 2

这里的第一个问题是ev.target.appendChild将图像作为子元素添加到第一个drop的div，它会将它附加到第二个drop的img标签，创建更深的嵌套关系随后的每一次下降。 console.log(ev.target) 在该函数中可以观察到这一点。

所以一种方法是首先确保我们要附加到的节点是 div，然后我们的条件将检查该 div 是否已经有任何子节点。我还简化了您的事件侦听器。这是一个例子：

// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
  if (event.target.className == "dropbox" || event.target.className == "dropbox2") {
    event.target.style.border = "3px dotted red";
  }
});

// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
  if (event.target.className == "dropbox" || event.target.className == "dropbox2") {
    event.target.style.border = "";
  }
});

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  const element = ev.target.tagName === 'DIV' ? ev.target : ev.target.parentNode
  if (!element.children.length) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }
}

body {
  background-image: url('https://drive.google.com/uc?export=view&id=1EcpUOWcgSSuAsFv0GbbSRcMtaOH-UY8q');
  background-repeat: no-repeat;
}

.dropbox {
  position: absolute;
  float: ;
  width: 200px;
  height: 200px;
  border: 2px dashed black
}

.dropbox2 {
  position: absolute;
  float: ;
  width: 229px;
  height: 80px;
  border: 2px dashed black
}

.sails {
  transform: translateY(-5%);
}

#div1 {
  margin: 69px 354px;
}

#div2 {
  margin: 69px 620px;
}

#div3 {
  margin: 65px 887px;
}

#div4 {
  margin: 65px 1150px;
}

#div5 {
  margin: 367px 333px;
}

#div6 {
  margin: 367px 600px;
}

#div7 {
  margin: 362px 879px;
}

#div8 {
  margin: 363px 1150px;
}

#div9 {
  margin: 283px 333px;
}

#div10 {
  margin: 283px 599px;
}

#div11 {
  margin: 279px 866px;
}

#div12 {
  margin: 279px 1129px;
}

#div13 {
  margin: 581px 312px;
}

#div14 {
  margin: 581px 579px;
}

#div15 {
  margin: 576px 858px;
}

#div16 {
  margin: 577px 1129px;
}

#drag3 {
  transform: translateY(-54%);
}

<div class="dropbox2" id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div14" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div15" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div16" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img class="sails" id="drag1" src="https://drive.google.com/uc?export=view&id=1ARGJDwdV9kH0IpOOL5hlm3lmOzOn81F1" draggable="true" ondragstart="drag(event)" width="215" height="210">

<img class="sails" id="drag2" src="https://drive.google.com/uc?export=view&id=1ARGJDwdV9kH0IpOOL5hlm3lmOzOn81F1" draggable="true" ondragstart="drag(event)" width="215" height="210">

<img id="drag3" src="https://drive.google.com/uc?export=view&id=1vZIEa2VkNaQLdb8zEWSkKaEeSLOOFBFV" draggable="true" ondragstart="drag(event)" width="290" height="170">

Answer 3

在放置事件时，当第一个元素被放置时，将一个新的class : noDrop ev.target.classList.add("noDrop"); 附加到目标 div，以便将其“标记”为已占用。

在第二次 drop 时询问父级是否有 class noDrop，如果有，则不执行任何操作，否则附加新对象。

// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
  if (event.target.className == "dropbox") {
    event.target.style.border = "3px dotted red";
  }
});
document.addEventListener("dragenter", function(event) {
  if (event.target.className == "dropbox2") {
    event.target.style.border = "3px dotted red";
  }
});

// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
  if (event.target.className == "dropbox") {
    event.target.style.border = "";
  }
});
document.addEventListener("dragleave", function(event) {
  if (event.target.className == "dropbox2") {
    event.target.style.border = "";
  }
});




function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  debugger
  var parentID = ev.target.parentNode.className
  var data = ev.dataTransfer.getData("text");

  if (parentID.includes("noDrop")) {
    console.log("no transfer");
    ev.preventDefault();
  } else {
    ev.preventDefault();
    ev.target.appendChild(document.getElementById(data));
    ev.target.classList.add("noDrop");
  }
}

body {
  background-image: url('https://drive.google.com/uc?export=view&id=1EcpUOWcgSSuAsFv0GbbSRcMtaOH-UY8q');
  background-repeat: no-repeat;
}

.dropbox {
  position: absolute;
  float: ;
  width: 200px;
  height: 200px;
  border: 2px dashed black
}

.dropbox2 {
  position: absolute;
  float: ;
  width: 229px;
  height: 80px;
  border: 2px dashed black
}

.sails {
  transform: translateY(-5%);
}

#div1 {
  margin: 69px 354px;
}

#div2 {
  margin: 69px 620px;
}

#div3 {
  margin: 65px 887px;
}

#div4 {
  margin: 65px 1150px;
}

#div5 {
  margin: 367px 333px;
}

#div6 {
  margin: 367px 600px;
}

#div7 {
  margin: 362px 879px;
}

#div8 {
  margin: 363px 1150px;
}

#div9 {
  margin: 283px 333px;
}

#div10 {
  margin: 283px 599px;
}

#div11 {
  margin: 279px 866px;
}

#div12 {
  margin: 279px 1129px;
}

#div13 {
  margin: 581px 312px;
}

#div14 {
  margin: 581px 579px;
}

#div15 {
  margin: 576px 858px;
}

#div16 {
  margin: 577px 1129px;
}

#drag3 {
  transform: translateY(-54%);
}

<div class="dropbox2" id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div14" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div15" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox2" id="div16" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dropbox" id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img class="sails" id="drag1" src="https://drive.google.com/uc?export=view&id=1ARGJDwdV9kH0IpOOL5hlm3lmOzOn81F1" draggable="true" ondragstart="drag(event)" width="215" height="210">

<img class="sails" id="drag2" src="https://drive.google.com/uc?export=view&id=1ARGJDwdV9kH0IpOOL5hlm3lmOzOn81F1" draggable="true" ondragstart="drag(event)" width="215" height="210">

<img id="drag3" src="https://drive.google.com/uc?export=view&id=1vZIEa2VkNaQLdb8zEWSkKaEeSLOOFBFV" draggable="true" ondragstart="drag(event)" width="290" height="170">