拖动事件未以角度2触发 [英] Drag event not firing with angular 2

问题描述

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

I have a canvas and I want users to be able to drag graphic elements around it. Thus, I don't want the canvas itself to drag, but I want to handle dragstart, drag, and drop events when the mouse does those things.

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

I'm using Angular 2, so I have:

<!-- 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中:

Then in 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事件中滚动自己的拖动动作?

When I try dragging something, I get starting printed in the console, but that's it. How do I get the other drag events to fire? Do I have to roll my own dragging from mousedown/move/up events?

stackblitz 上的独立示例.我想拖动" div来引发dragstart/drag/drop事件，但它只会触发开始的事件.

Stand-alone example on stackblitz. I want "dragging" the div around to fire dragstart/drag/drop events, but it only fires the starting one.

推荐答案

您不必使用event.preventDefault().仅在要使用纯JS时才需要.

You do not have to use event.preventDefault(). This is only necessary if you want to use pure JS.

尝试以下Stackblitz: https://stackblitz.com/edit/angular-x7umar

Try this Stackblitz: https://stackblitz.com/edit/angular-x7umar

也请参考MDN实施指南以选择适合您目的的事件:

Also refer to the MDN implementation guide to choose the right events for your purposes: https://developer.mozilla.org/en-US/docs/Web/Events/drag

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

If you want to modify the dragged element, simply implement some CSS adjustments inside your dragstart and dragend handler of the 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元素.

With event.target you have the complete manipulable DOM element of the dragged element.

这篇关于拖动事件未以角度2触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！