Drag and Drop ( Drag an already dropped item )

Asked

Viewed 71 times

0

Good morning!! I could use a little help on Jscript. I made a Drag and Drop code where I put a gif inside the contents div and I can move it freely. I’m just not able to do the following:
When trying to drop a gif next to an already dropped item into the contents div, the gif pushes the droped item. (Currently, the item disappears when I try to put in the already dropped image).
Can you help me?? :(
Follow the code as an example: 

  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>

javascript html5 drag-n-drop

  • What you want is more mathematical than the code, with your code even to do this, you need to capture the position and size of the two elements, and compare within the father if they meet at some point, I think the basic line equation you can cross one or the other, if you cross, only fire by changing the position with the proportion of the overlap, if you can’t or no one else answer the night I make a response, because it will be kind of long.

  • Got it ! The firing will be done by . setAttribute("style", "position: Fixed; ... right? But I still have no idea how to compare them, I’ll try something here !! Obg :DD

  • That’s right, you capture with the same selector too, just imagine the div that the elements are inside as a Cartesian plan(X,Y) to be able to apply the equation, draw on a sheet that you will understand easy.

  • Beauty !! obg !!

  • I could not, after inserting the image inside another image, it does not respect the command to move to the side, the image simply disappears

  • puts the code you asked in the question, I do not have time to make a full answer, but helping you

  • I put an Else to differentiate whether it’s a new image or whether it’s moving an image from the div content. The only thing I can’t tell is whether this new image is falling on the content div or on top of another image... For if I drop an image (²) on top of another image (¹), the image (²) adds some

  • It’s kind of complicated, I’ll move to the chat and try to explain a little bit better

  • Let’s go continue this discussion in chat.

Show 4 more comments

1 answer

0


I managed to resolve this issue by replacing the ev.target.appendChild(copyimg); for div.appendChild(copyimg); before the if.

Browser other questions tagged javascript html5 drag-n-drop

You are not signed in. Login or sign up in order to post.