3

Boa tarde, estou fazendo um código de Drag and Drop e ao dropar uma imagem dentro de outra imagem, ela simplesmente some
No exemplo deste site as imagens ficam corretamente uma em cima das outras
inserir a descrição da imagem aqui
Já no meu código (com imagens) ao colocar uma imagem (²) em cima da outra imagem (¹)... a imagem (²) some, podem me ajudar??

//Drag'n Drop functions
var elementCounter = 0; // Designa a ID ao elemento dropado

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

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

function drop(ev) {
  ev.preventDefault();
  var x = ev.clientX;
  var y = ev.clientY;
  var data = ev.dataTransfer.getData("text");
  var copyimg = document.createElement("img");
  var original = document.getElementById(data);
  copyimg.src = original.src;
  ev.target.appendChild(copyimg);
  if (original.parentNode.id == "conteudo") {
    original.parentNode.removeChild(original);
    alert("Movendo imagem ");
    copyimg.id = "dropped_elem" + (++elementCounter);
    copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
    copyimg.setAttribute('draggable', true);
    copyimg.setAttribute('ondragstart', "drag(event)");
  } else {
    copyimg.id = "dropped_elem" + (++elementCounter);
    copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
    copyimg.setAttribute('draggable', true);
    copyimg.setAttribute('ondragstart', "drag(event)");
    console.log("Nova imagem ", elementCounter);

  }
}
#conteudo {
  width: 250px;
  height: 250px;
  float: left;
  background-color: #ff1;
  display: initial;
  margin: auto;
  z-index: 6;
  overflow: hidden;
}
<img id="drag1" width=50px height=50px src="https://orig00.deviantart.net/0772/f/2015/291/2/9/29820d36256689bdeae12f344e4f0b7a-d9djrwh.gif" draggable="true" ondragstart="drag(event)" alt="" />
<div id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

1 Resposta 1

3

O problema está aqui: ev.target.appendChild(copyimg);

Quando estás em cima de uma imagem o ev.target não é a div#conteudo mas sim a imagem, e a imagem não permite descendentes por isso o .appendChild() é interrompido.

Passa o this no HTML (ondrop="drop(event, this)") e usa depois a div diretamente como argumento (function drop(ev, div) {).

O exemplo ficaria assim:

//Drag'n Drop functions
var elementCounter = 0; // Designa a ID ao elemento dropado

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

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

function drop(ev, div) {

  ev.preventDefault();
  var x = ev.clientX;
  var y = ev.clientY;
  var data = ev.dataTransfer.getData("text");
  var copyimg = document.createElement("img");
  var original = document.getElementById(data);
  copyimg.src = original.src;
  div.appendChild(copyimg);
  if (original.parentNode.id == "conteudo") {
    original.parentNode.removeChild(original);
    alert("Movendo imagem ");
    copyimg.id = "dropped_elem" + (++elementCounter);
    copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
    copyimg.setAttribute('draggable', true);
    copyimg.setAttribute('ondragstart', "drag(event)");
  } else {
    alert("Nova imagem ");
    copyimg.id = "dropped_elem" + (++elementCounter);
    copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
    copyimg.setAttribute('draggable', true);
    copyimg.setAttribute('ondragstart', "drag(event)");
  }
}
#conteudo {
  width: 250px;
  height: 250px;
  float: left;
  background-color: #ff1;
  display: initial;
  margin: auto;
  z-index: 6;
  overflow: hidden;
}
<html>

<body>
  <img id="drag1" width=50px height=50px src="https://orig00.deviantart.net/0772/f/2015/291/2/9/29820d36256689bdeae12f344e4f0b7a-d9djrwh.gif" draggable="true" ondragstart="drag(event)" alt="" />
  <div id="conteudo" ondrop="drop(event, this)" ondragover="allowDrop(event)">
  </div>
</body>

</html>

4
  • 1
    Wooow!! Perfeito !!, agora vou estudar melhor essa parte para entender direitinho Só mais uma pergunta, terá como comparar onde irá cair a imagem? Por exemplo, quando eu puxo a imagem para o div, se cair no div, ele ficará parado E se caso cair em uma outra imagem, ele a empurrará para algum lugar??
    – Sora
    Commented 19/09/2017 às 19:39
  • A parte de empurrar é a de menos, o problema é comparar onde irá cair, se irá cair na div conteúdo ou em uma imagem
    – Sora
    Commented 19/09/2017 às 19:39
  • 1
    @Sora faz console.log(ev.target.tagName); e vais ver se é uma div ou img.
    – Sergio
    Commented 19/09/2017 às 19:40
  • 1
    estou muito grato pela sua ajuda!!! Valeuuu
    – Sora
    Commented 19/09/2017 às 19:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .