CdkDrag如何在拖动时编辑元素的位置

时间:2020-04-02 17:11:39

标签: angular drag-and-drop angular-cdk

我正在尝试通过Cdk拖放在Angular中创建日历,我的日程安排显示在日历中,有些可能会在几天内出现。

当我拖动这些跨越多天的计划时,我在开始拖动后便立即调整了它们的大小(以方便在另一天替换)。 问题是,当我调整它们的大小时,它们不再位于鼠标光标下方。

当用户点击我的CdkDrag然后将我的元素替换到该位置时,是否可以获得该位置?

这是我拖动的div:

<div class="schedule schedule-{{scheduleWrapper.schedule.id}}" cdkDrag
                 [cdkDragData]="scheduleWrapper"
                 (cdkDragStarted)="onDragStart($event, scheduleWrapper, schedulePlaceholder)">
    ....
</div>

onDragStart函数中,这是我调整元素大小的方法:

 this.renderer2.setStyle(event.source.element.nativeElement, 'width', this.cellWidth + 'px');

编辑: 我正在尝试做的只是当用户开始拖动元素时具有光标位置(x,y)。 我找到了一种方法,只需添加一个函数即可存储每次鼠标移动时的x和y,但是我不知道它是否经过优化以使用类似的东西。 有没有功能只能在特定时刻提供鼠标位置? 编辑:根本没有优化,这会使我的应用变慢

编辑3: 我找到了一种获取位置的方法(在拖动事件之前使用click事件)。 但是现在我有另一个问题,我找不到在拖动时如何编辑CdkDrag元素的位置。

我需要在开始拖动后立即更改位置,以使元素位于鼠标光标下方。

0 个答案:

没有答案
相关问题