拖动事件未使用角度 2 触发答案

【问题标题】：Drag event not firing with angular 2拖动事件未使用角度 2 触发
【发布时间】：2018-04-23 16:45:46
【问题描述】：

我有一个画布，我希望用户能够在它周围拖动图形元素。因此，我不希望画布本身拖动，但我想在鼠标执行这些操作时处理 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 事件，但它只会触发起始事件。

【问题讨论】：

如果从所有函数中删除 event.preventDefault(); 会发生什么？
它在拖动开始时移动 div，这是我不想要的。
不确定这是否有帮助，但您可以查看这些 - rectangleworld.com/blog/archives/129, stackoverflow.com/questions/4566764/drag-objects-in-canvas
画布在哪里？您可以将其包含在标记中吗？如果你能在 stackblitz 中重现这个问题，那就更好了。
顺便说一句，(drop) 行的末尾有一个错字（可能只在问题中，而不是在您的实际标记中）。

标签： javascript angular

【解决方案1】：

您不必使用event.preventDefault()。仅当您想使用纯 JS 时才需要这样做。

试试这个 Stackblitz：https://stackblitz.com/edit/angular-x7umar

另请参阅 MDN 实施指南以根据您的目的选择正确的事件：https://developer.mozilla.org/en-US/docs/Web/Events/drag

进一步的步骤

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

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 元素。

【讨论】：

【解决方案2】：

试试

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

组件

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

【讨论】：