0

Bom dia!! Estou precisando de uma ajuda em JScript. Fiz um código de Drag and Drop onde coloco um gif dentro da div conteudo e posso move-lo livremente. Só não estou conseguindo fazer o seguinte:
Ao tentar dropar um gif próximo a um item já dropado na div conteudo, o gif empurrar o item dropado.(Atualmente, o item some quando tento colocar na imagem já dropada).
Podem me ajudar?? :(
Segue o código como exemplo:

  var elementCounter = 0; // to assign ids to dropped element.
  //Drag'n Drop functions
  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 {
        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:500px;
      height:500px;
      float:left;
      background-color:#ff1;  
      display: initial;
      margin: auto;
      z-index: 6;
      overflow: hidden;
    }
 <html>
 <head>
 </head>
  <body>
    <img id="drag1" width="70" src="https://orig00.deviantart.net/0772/f/2015/291/2/9/29820d36256689bdeae12f344e4f0b7a-d9djrwh.gif" draggable="true" ondragstart="drag(event)"  alt="" />
    <img id="drag1" width="70" src="https://orig00.deviantart.net/0772/f/2015/291/2/9/29820d36256689bdeae12f344e4f0b7a-d9djrwh.gif" draggable="true" ondragstart="drag(event)"  alt="" />
    <img id="drag1" width="70" 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>
  </body>
</html>

9
  • Isso que você quer é mais matemático do que pelo código, com o seu código mesmo da pra fazer isso, você precisa captar a posição e o tamanho dos dois elementos, e comparar dentro do pai se eles se encontram em algum momento, acho que a equação das retas básica você consegue cruzar um ou e o outro, caso cruze, só disparar mudando a posição com a proporção da sobreposição, se não conseguir ou ninguém mais responder a noite faço uma resposta, pois vai ser meio longa. Commented 18/09/2017 às 14:08
  • Entendi ! O disparar será feito pelo .setAttribute("style", "position: fixed; ... certo?? Porém ainda não tenho ideia de como compara-los, vou tentar algo aqui !! Obg :DD
    – Sora
    Commented 18/09/2017 às 14:13
  • Isso mesmo, você capta com o mesmo seletor também, só imaginar a div que os elementos estão dentro como um plano cartesiano(X,Y) pra conseguir aplicar a equação, desenha numa folha que vais entender facinho. Commented 18/09/2017 às 14:19
  • Beleza !! obg !!
    – Sora
    Commented 18/09/2017 às 14:20
  • Não consegui, após inserir a imagem dentro de outra imagem, ele não respeita o comando para mover para o lado, a imagem simplesmente some
    – Sora
    Commented 19/09/2017 às 12:55

1 Resposta 1

0

Consegui resolver esta questão substituindo o ev.target.appendChild(copyimg); por div.appendChild(copyimg); antes do if.

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 .