Angular 9 DragDrop - 如何停止 DropList "Element-Shuffle" 动画

Question

我正在尝试禁用 下拉列表 的 "auto sorting/shifting" 动画。我的意思是，给定一个垂直的可拖动列表，当我向下拖动顶部元素时，其他元素明显向上移动。这对于 重新排序 来说很酷，但我正在进行交换。此外，我的可拖动元素与屏幕上的其他元素对齐，因此在拖动期间，当下拉列表四处移动其元素时，一切看起来都是倾斜的。

就上下文而言，这是针对 D&D 角色创建者的，其中 6 项统计数据（力量、敏捷、体质、智力、感知和魅力）位于垂直的、不可拖动的行中。数值的拖放列表位于其旁边。当我向下拖动 Str 分数以与 Int 分数交换时，然后在拖动期间，Dex 分数向上移动到 Str，Con 向上移动到 Dex，等等。一切都在下降时自行解决，但我没有想要这种行为。

理想情况下，被拖动的元素会在列表中留下一个 "shadow" 本身，以防止其他元素四处移动，但我会像一个空白 space 一样高兴，或灰色 space，或类似的颜色。

我曾见过这种行为，但只是偶然。我认为它与拖动组件（而不是 div）有关，但这看起来更像是一个错误而不是一个功能。

有没有办法防止下拉列表元素在拖动过程中移动？

<div class="row" [formGroup]="statsFormGroup">
    <!-- non-movable stat names -->
    <div class="col col-6">
        <ul>
            <li *ngFor="let stat of stats" class="form-control mt-1">{{ stat | stat }}</li>
        </ul>
    </div>
    <!-- draggable scores -->
    <div class="col col-6" formArrayName="stats" cdkDropList (cdkDropListDropped)="scoreDrop($event)">
        <div *ngFor="let control of statsFormArray.controls; let i = index;" cdkDrag>
            <input type="text" [formControlName]="i" class="form-control mt-1" />
        </div>
    </div>
</div>

Answer 1

如果您还没有解决这个问题，您可以尝试将 cdkDropListSortingDisabled 设置为 false。您可以阅读更多 here.

您也可以尝试将元素的位置设置为绝对位置。当您将新项目添加到下拉列表时，这会阻止事情四处移动。

Answer 2

我希望你已经找到了解决方案，我将这个答案发布给所有其他面临类似问题的人。

第 1 步：停止元素移动的动画并将占位符不透明度设置为 0.5 以显示拾取列表项的阴影。我们可以通过应用变换样式来做到这一点。

   .cdk-drag:not(.cdk-drag-preview) {
      transform: none !important;
    }

    .cdk-drag-placeholder {
      opacity: 0.5;
    }

第 2 步：当拖动占位符位于该行时突出显示该行。我们可以通过使用 cdkDropListSorted 事件来实现这一点，当我们拖动元素时，该事件 returns 使用列表的 currentIndex 和 previousIndex。获取索引后，我们可以使用 Angular Renderer2 Api.

轻松更改样式

这是 stackBlitz 中的一个工作示例：SwapElementsAngularMaterial

Angular 9 DragDrop - 如何停止 DropList "Element-Shuffle" 动画

Angular 9 DragDrop - How to stop the DropList "Element-Shuffle" Animation

angular9

angular-animations

angulardraganddroplists