CODEWITHSUNDEEP
javascripthtmldrag-and-drop
Sora
Sora

Reputation: 167

Drag and Drop - Drag an item already dropped

Good Morning, I can not do this drag and drop in jscript. After picking up the item and dropping it into the 'conteudo' div, I can not pick it up again (inside the conteudo div) and move it freely because it return an error, can somebody help me?

enter image description here

enter image description here

      //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);
          copyimg.setAttribute("style", "position: fixed; top: "+(y-50)+"px; left:"+(x-50)+"px;");
          copyimg.setAttribute('draggable', true);
      }
    #conteudo{
      width:500px;
      height:500px;
      float:left;
      background-color:#ff1;  
      display: initial;
      margin: auto;
      z-index: 6;
      overflow: hidden;
    }
<html>
  <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>

Upvotes: 1

Views: 70

Answers (1)

Lalit
Lalit

Reputation: 1369

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);
          }
          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>
  <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>

I have added below things in your code :-

  1. copyimg.id = "dropped_elem"+(++elementCounter); :- to assign id to dropped element.
  2. copyimg.setAttribute('ondragstart', "drag(event)"); :- so that element can be dragged again.
  3. elementCounter :- variable to assign ids to dropped elements.

Upvotes: 1

Related Questions