我有一个画布,希望用户能够拖动其中的图形元素。因此,我不希望画布本身被拖动,但是当鼠标执行这些操作时,我需要处理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();
,会发生什么? - Souvik Ghosh(drop)
行末有一个错别字(可能只是在问题中有,而不是在您的实际标记中)。 - ConnorsFan