javascript 拖动事件不以角度 2 触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49986104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drag event not firing with angular 2
提问by kristina
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.
我有一个画布，我希望用户能够在它周围拖动图形元素。因此，我不希望画布本身拖动，但我想在鼠标执行这些操作时处理拖动开始、拖动和放置事件。
I'm using Angular 2, so I have:
我正在使用 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>
Then in editor.component.ts:
然后在 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();
}
When I try dragging something, I get startingprinted 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?
当我尝试拖动某些东西时，我会starting在控制台中打印出来，但仅此而已。如何触发其他拖动事件？我是否必须从 mousedown/move/up 事件中滚动我自己的拖动？
Stand-alone example on stackblitz. I want "dragging" the div around to fire dragstart/drag/drop events, but it only fires the starting one.
stackblitz上的独立示例。我想“拖动” div 来触发 dragstart/drag/drop 事件，但它只触发起始事件。
采纳答案by Michael Czechowski
You do not have to use event.preventDefault(). This is only necessary if you want to use pure JS.
您不必使用event.preventDefault(). 仅当您想使用纯 JS 时才需要这样做。
Try this Stackblitz: https://stackblitz.com/edit/angular-x7umar
试试这个 Stackblitz：https://stackblitz.com/edit/angular-x7umar
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
另请参阅 MDN 实施指南以根据您的目的选择正确的事件：https: //developer.mozilla.org/en-US/docs/Web/Events/drag
Further steps
进一步的步骤
If you want to modify the dragged element, simply implement some CSS adjustments inside your dragstartand dragendhandler of the event.target:
如果您想修改拖动的元素，只需在您的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;
}
With event.targetyou have the complete manipulable DOM element of the dragged element.
有了event.target拖动元素的完整可操作 DOM 元素。
回答by Admir
try with
尝试
(dragover)="onDragOver($event)"
(dragleave)="onDragLeave($event)"
Component
零件
onDragOver(event) {
// do something
event.preventDefault();
}
onDragLeave(event) {
// do something
event.preventDefault();
}
