JavaScript错误: Why I cannot clone/copy a tag from "li" to "table"?

Question

我想拖动<li>从列表中将其拖放到 <td>在表中并复制该值。

拖拽做得很完美，但它不是应对，只是剪切。我想复制/克隆标签。我尝试了这段代码，但它不起作用。

 var dataM = ev.dataTransfer.getData("text");
 var clone = dataM.cloneNode(true);
 document.getElementById("fri11").appendChild(document.getElementById(clone));

//For drag and drop
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));


  //to know the drop activity
  document.getElementById("demo").innerHTML = "The p element was dropped.";

  //to know the table specific area Id and data
  var newdata = ev.target.id;
  document.getElementById("demo1").innerHTML = "" + newdata;
  document.getElementById("demo11").innerHTML = "" + document.getElementById(newdata);

  //to know the course list specific area Id and data
  var newdata1 = ev.dataTransfer.getData("text");
  document.getElementById("demo2").innerHTML = "" + newdata1;
  document.getElementById("demo22").innerHTML = "" + document.getElementById(newdata1);


  //cut perfectly done  !!!!but its not coping, just cutting :(
  // var dataM = ev.dataTransfer.getData("text");
  // document.getElementById("fri11").appendChild(document.getElementById(dataM));

  //I tried this piece of code but it's not working.
  var dataM = ev.dataTransfer.getData("text");
  var clone = dataM.cloneNode(true);
  document.getElementById("fri11").appendChild(document.getElementById(clone));
}

table td {
  padding: 5px;
  border: 1px solid black;
}

<!-- this is part of the table -->
<table>
  <tr>
    <td>11:20am-12:50pm</td>
    <td id="sat11" value="s" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    <td id="sun11" value="s" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    <td id="mon11" value="s" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    <td id="tue11" value="s" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    <td id="wed11" value="s" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    <td id="thu11" value="s" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    <td id="fri11" value="s" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
  </tr>
</table>



<!-- this is part of the list -->
<ul id="myUL">
  <li id="drag1" draggable="true" ondragstart="drag(event)">CSE115</li>
  <li id="drag2" draggable="true" ondragstart="drag(event)">CSE173</li>
  <li id="drag3" draggable="true" ondragstart="drag(event)">CSE215</li>
  <li id="drag4" draggable="true" ondragstart="drag(event)">CSE225</li>
  <li id="drag5" draggable="true" ondragstart="drag(event)">CSE231</li>
  <li id="drag6" draggable="true" ondragstart="drag(event)">CSE299</li>
  <li id="drag7" draggable="true" ondragstart="drag(event)">CSE311</li>
  <li id="drag8" draggable="true" ondragstart="drag(event)">CSE327</li>
  <li id="drag9" draggable="true" ondragstart="drag(event)">CSE332</li>
  <li id="drag10" draggable="true" ondragstart="drag(event)">CSE323</li>
</ul>

https://ibb.co/NWzXdtt其实我想要这个

我有两件事:一张表和一张列表。我想拖动一个列表项<li>从列表中取出并将其放入表中。一切正常，但我想在表中的另一个框中复制/克隆标签(例如，当我将标签/列表/数据拖放到表 id sun11 时，它会自动克隆到表 id fri11 )我从列表中删除元素/标签。我尝试克隆它，但它不起作用。我认为主要问题在 JavaScript 的第 36 行。但我无法克隆数据/标签。

Answer 1

代码笔:Link

使用target.appendChild(el)会将el移动到目标。使用 target.appendChild(el.cloneNode()) 会将 el 复制到目标。

所以使用:document.getElementById("fri11").appendChild(document.getElementById(dataM).cloneNode(true))

<小时/>

您的代码中存在一些小问题。 dataM是id，所以不能直接克隆它。您应该首先获取它，然后克隆它。