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

Question

Im trying to make a web page utilizing the drag and drop feature. The page is meant for the user to drag an image (I made two classes, one called "sails" and the other "boats") to a div (class named "dropbox" and "dropbox2").

The problem I'm having is that if a user drops an image into a droppable div that already contains an image, one of the images disappears and can't be recovered.

To solve this problem I believe I need to create a function using the if/else statement to check whether the div contains an image. If it does then I want the drag and drop feature to keep its default setting so that it doesn't drop into the div and disappear from the user. Else, it executes the code I already have that turns the default nature off so that it can drop into the 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));
}
}

How can I word the condition so that I can check whether or not the div contains the image and how can I word the block of code to NOT allow the image to drop into that div if the condition is true?

or am I attacking this problem the wrong way? It seems logical to me but I am not experienced.

Here is a link to my codepen for this project:

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

Any help would be greatly appreciated :)

Answer 1

The first problem here is that ev.target.appendChild will add the image as a child to the div on the first drop, and it will append it to the img tag on the second drop, creating a deeper nested relationship each subsequent drop. This is observable by console.log(ev.target) in that function.

So one approach would be to first ensure that the node we are appending to is the div, and then our conditional will check if that div already has any children. I also simplified your event listeners. Here is an example:

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

You need to write your condition in the drop function itself.

Here's how you might do it:

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

At drop event, attach a new class : noDrop ev.target.classList.add("noDrop"); to the target div when the first element is dropped, in order to "mark" him as occupied.

At the second drop ask the parent if it has the class noDrop, if it has, do nothing, otherwise attach the new object.

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