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

【问题标题】：i am using javascript drag and drop events in angular 6 . but facing issue in ev.dataTransfer.effectAllowed = "copy";我在 Angular 6 中使用 javascript 拖放事件。但在 ev.dataTransfer.effectAllowed = "copy"; 中面临问题
【发布时间】：2023-03-06 13:47:01
【问题描述】：

我想将元素从左 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

【问题讨论】：

标签： javascript html angular angular6

【解决方案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());
    }
  }

【讨论】：

当我尝试从右 div 1 拖放到右 div 2 时，它无法正常工作。它没有拖动/移动。它没有将图像从右 div 1 移动到右 div 2。从从左到右的 div 工作正常。但没有将图像从右 div 1 移动到右 div 2 .drag 事件没有复制到新的地方我认为这就是为什么？如何做到这一点
stackblitz.com/edit/… 已更新为您的代码。现在唯一的问题是将项目从右 div 1 移动到右 div 2。
对于左 div，我们在 (dragstart)="drag($event)" 中设置了允许复制的效果。但是对于 Div 1 和 Div 2，我们没有这样做。默认情况下，允许的效果是“全部”。因此，它不会进入任何一个 if 条件。您可能必须决定什么应该是默认行为并相应地处理它。如果复制是默认值，则删除特定于复制的条件。你应该有一个全部或默认选项。希望我的解释有所帮助。