Drag and Drop - перетаскивание уже сброшенного предмета

Question

Drag and Drop - перетаскивание уже сброшенного предмета

1

Доброе утро, я не могу этого перетащить в jscript. После того, как вы подняли предмет и отбросили его в div 'conteudo', я не могу его снова забрать (внутри conteudo div) и свободно перемещать его, потому что он возвращает ошибку, может кто-нибудь мне помочь?

      //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>

Sora 18 сен. 2017, в 14:23

Источник

Теги:

javascript

html5

drag-and-drop

1 ответ

Ещё вопросы

Lalit · Accepted Answer · 2017-09-18T10-24-00.000Z

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>

Я добавил ниже в вашем коде:

copyimg.id = "drop_elem" + (++elementCounter); : - присвоить id отбрасываемому элементу.
copyimg.setAttribute('ondragstart', "drag (event)"); : - чтобы элемент можно было перетащить снова.
elementCounter: - переменная для присваивания идентификаторов отбрасываемых элементов.

Внутри функции удаления мы проверяем, если идентификатор родительского узла удаленного элемента равен "conteudo". Если да, то мы удаляем затянутый элемент.
Лалит, ты можешь мне снова помочь?
Ой, прости, я решил проблему! Благодарен <3