Question

早上好，我不能在jscript中拖放。拿起物品并将其放入'conteudo'div后，我无法再次拾取它（在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>

Answer 1

(7FFFFFFFFFFFFFFF)16 = (0111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111)2

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

我在您的代码中添加了以下内容： -

copyimg.id =“dropped_elem”+（++ elementCounter）; ： - 将id分配给已删除的元素。
copyimg.setAttribute（'ondragstart'，“drag（event）”）; ： - 这样可以再次拖动元素。
elementCounter： - 用于将ID分配给已删除元素的变量。

拖放 - 拖动已删除的项目

1 个答案: