Как я могу написать функцию javascript с оператором if / else, чтобы проверить, содержит ли класс <div>класс <img>или <img>

Question

Я пытаюсь создать веб-страницу, используя функцию перетаскивания. Страница предназначена для пользователя, чтобы перетащить изображение (я создал два класса, один из которых называется «паруса», а другой - «лодки») в 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, если условие это правда?

или я атакую ​​эту проблему неправильно? Мне кажется логичным, но я не опытный.

Вот ссылка на мой кодовый блок для этого проекта:

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 добавит изображение в качестве дочернего элемента к 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%);
}

Answer 3

При событии перетаскивания присоедините новый class: noDrop ev.target.classList.add("noDrop"); к целевому элементу div, когда первый элемент отброшен, чтобы «пометить» его как занятого.

При втором сбросе спросите родитель, если у него есть 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%);
}