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

Question

我正在尝试使用拖放功能制作网页。该页面旨在供用户将图像（我制作了两个 classes，一个称为 "sails"，另一个 "boats"）拖到 div（class 命名为 "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 link：

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

任何帮助将不胜感激:)

Answer 1

这里的第一个问题是 ev.target.appendChild 会在第一次放置时将图像作为子图像添加到 div，然后将其附加到 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 2

您需要在 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 3

在丢弃事件中，附加一个新的 class : noDrop ev.target.classList.add("noDrop"); 到目标 div 当第一个元素被丢弃时，为了 "mark" 他被占用.

在第二次丢弃时询问父对象是否有 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">

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

How can I write a javascript function with the if/else statement to check whether a <div> class contains a <img> or <img> class

html

javascript

if-statement

drag-and-drop