Ошибка JavaScript: Почему я не могу клонировать / скопировать тег из "li" в "table"? - PullRequest
Новая
       31

Ошибка JavaScript: Почему я не могу клонировать / скопировать тег из "li" в "table"?

0 голосов
/ 06 июня 2019

Я хочу перетащить <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 На самом деле, я хочу это

У меня есть 2 вещи: одна таблица и один список. Я хочу перетащить элемент списка <li> из списка и поместить его в таблицу. Все в порядке, но я хочу дублировать / клонировать тег (например, когда я перетаскиваю тег / список / данные на идентификатор таблицы sun11, он автоматически клонируется на идентификатор таблицы fri11) в одном другом поле таблицы, когда Я удаляю элемент / тег из списка. Я пытался клонировать это, но это не работает. Я думаю, что главная проблема в строке 36 в JavaScript. но я не могу клонировать данные / тег.

1 Ответ

1 голос
/ 06 июня 2019

Codepen: Ссылка

с помощью target.appendChild(el) переместит el к цели.использование target.appendChild(el.cloneNode()) скопирует el в target.

, поэтому используйте: document.getElementById("fri11").appendChild(document.getElementById(dataM).cloneNode(true))

В вашем коде есть небольшие проблемы.dataM - это идентификатор, поэтому вы не можете его клонировать напрямую.сначала вы должны получить его, а затем клонировать.

...