拖放javascript中的克隆

Question

I am making a drag and drop section, on the top I have the value fields which can be mapped to the Key fields.

I am using HTML5 drag and drop for this. What I want is, it should make a clone of the div and then drag and drop that. I don't want the original Value chip to disappear from the top bar.

public drop(ev) {
  ev.preventDefault();
  if (ev.target.hasChildNodes()) {
    return;
  }
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

public drag(ev) {
  this._logger.warn("Inside drag()");
  ev.dataTransfer.setData("text", ev.target.id);
}

public allowDrop(ev) {
  ev.preventDefault();
  if (ev.target.hasChildNodes()) {
    return;
  }
}

Answer 1

您可以使用cloneNode（）克隆原始div，然后对其进行操作。