使用Angular 2时拖动事件无法触发

Question

我有一个画布，希望用户能够拖动其中的图形元素。因此，我不希望画布本身被拖动，但是当鼠标执行这些操作时，我需要处理dragstart、drag和drop事件。

我正在使用Angular 2，所以我有:

<!-- editor.component.html -->
<div #rendererContainer
  draggable="true"
  (dragstart)="onDragStart($event)"
  (drag)="onDrag($event)" 
  (dragover)="onDrag($event)" 
  (drop)="onDragEnd($event)"
  (dragend)="onDragEnd($event)"> 
</div>

然后在editor.component.ts文件中：

onDragStart(event) {
  console.log(`starting`);
  event.preventDefault();
}

onDrag(event) {
  console.log('dragging');
  event.preventDefault();
}

onDragEnd(event) {
  console.log('drag end');
  event.preventDefault();
}

当我尝试拖动某些东西时，会在控制台中打印出starting，但仅仅只有这个。如何让其他的拖拽事件触发呢？我需要从mousedown/move/up事件自己实现拖拽吗？

在stackblitz上的独立示例中，我想要拖动div并触发dragstart/drag/drop事件，但它只触发了起始事件。

- kristina

---

如果您从所有函数中删除 event.preventDefault();，会发生什么？ - Souvik Ghosh

它会在拖动开始时移动 div，这不是我想要的。 - kris

不确定是否有帮助，但您可以查看以下链接：http://rectangleworld.com/blog/archives/129，https://dev59.com/i2455IYBdhLWcg3wD_sB - Souvik Ghosh

顺便提一下，在(drop)行末有一个错别字（可能只是在问题中有，而不是在您的实际标记中）。 - ConnorsFan

添加了一个链接到 https://angular-6db92z.stackblitz.io，其中包含一个简化的示例（画布部分并不是很重要）。 - kris

Answer 1

您不必使用event.preventDefault()，这仅在您想要使用纯JS时才是必需的。

请尝试此Stackblitz：https://stackblitz.com/edit/angular-x7umar 还可以参考MDN实现指南，选择适合您目的的正确事件：https://developer.mozilla.org/en-US/docs/Web/Events/drag 进一步的步骤：

如果您想修改拖动的元素，请在dragstart和dragend处理程序中实现一些CSS调整，这些处理程序是event.target。

onDragStart(event: DragEvent) {
  console.log(`starting`, event);
  // Hide dragged element
  event.target.style.opacity = 0;
}

onDragEnd(event: DragEvent) {
  console.log('drag end', event);
  // Show dragged element again
  event.target.style.opacity = 1;
}

使用event.target，您可以获取拖动元素的完整可操作DOM元素。

- Michael Czechowski

Answer 2

尝试使用

(dragover)="onDragOver($event)"
(dragleave)="onDragLeave($event)"

组件

onDragOver(event) {
    // do something
    event.preventDefault();
}
onDragLeave(event) {
    // do something
    event.preventDefault();
}

- Admir