javascript - 我在 Angular 6 中使用 javascript 拖放事件。但在 ev.dataTransfer.effectAllowed = "copy"; 中面临问题

Question

我想将元素从左 div 拖放到右 div（1 和 2）。但我不想从左 div 移动元素，它应该从左 div 复制并粘贴到右 div，因为我也想将元素从左 div 拖放到其他 div。我试过 ev.dataTransfer.effectAllowed = "copy"; 但它不能正常工作。请帮忙怎么办？我正在一个角度应用程序中工作。我也应该从左主 div 复制和粘贴，但元素应该在 div 1 和 2 之间交换位置我正在附加 stackblitz 链接，例如请帮助。

图像应从主左 div 复制并拖放到右 div 1 和 2。但图像应在右 div 1 和 2 之间移动和拖放

https://stackblitz.com/edit/hello-angular-6-ftmtye?file=src%2Fapp%2Fapp.component.html

标签： javascripthtmlangularangular6

Answer 1

您的 drop 方法应如下所示：

  drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    if (ev.dataTransfer.effectAllowed === 'move') {
      ev.target.appendChild(document.getElementById(data));
    }
    if (ev.dataTransfer.effectAllowed === 'copy') {
      ev.target.appendChild(document.getElementById(data).cloneNode());
    }
  }