拖动事件未以角度 2 触发

我有一个画布，我希望用户能够在其周围拖动图形元素。因此，我不希望画布本身拖动，但我想在鼠标执行这些操作时处理 Dragstart、拖放事件。

我正在使用 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 事件中滚动自己的拖动？

独立示例堆栈闪电战 https://stackblitz.com/edit/angular-qqwkmq。我想“拖动”div 来触发拖启动/拖/放事件，但它只触发起始事件。

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

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

另请参阅 MDN 实施指南，选择适合您用途的事件：https://developer.mozilla.org/en-US/docs/Web/Events/drag https://developer.mozilla.org/en-US/docs/Web/Events/drag

进一步的步骤

如果你想修改拖动的元素，只需在你的代码中实现一些 CSS 调整即可dragstart and dragend的处理程序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;
}

With event.target您拥有被拖动元素的完整可操作 DOM 元素。