angular9 - Angular 9 DragDrop - 如何停止 DropList“元素随机播放”动画
问题描述
我正在尝试禁用Drop List的“自动排序/移动”动画。我的意思是,给定一个可拖动的垂直列表,当我向下拖动顶部元素时,其他元素明显向上移动。这对于重新排序很酷,但我正在交换。此外,我的可拖动元素与屏幕上的其他元素对齐,因此在拖动过程中,当下拉列表移动其元素时,一切看起来都是倾斜的。
就上下文而言,这是针对 D&D 角色创建者的,其中 6 个统计数据(力量、敏捷、体质、智力、感知和魅力)位于垂直的、不可拖动的行中。数值的拖放列表在它旁边。当我将 Str 分数向下拖动以与 Int 分数交换时,在拖动期间,Dex 分数上升到 Str,Con 上升到 Dex,等等。一切都在下降时自行解决,但我没有想要这种行为。
理想情况下,被拖动的元素会在列表中留下自己的“阴影”,以防止其他元素四处移动,但我会喜欢空白空间、灰色空间或类似的东西。
我见过这种行为,但只是偶然。我认为这与拖动组件(而不是 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>
解决方案
如果您还没有解决这个问题,您可以尝试将 cdkDropListSortingDisabled 设置为 false。你可以在这里阅读更多。
您也可以尝试将元素的位置设置为绝对位置。当您将新项目添加到下拉列表时,这会阻止事物移动。
推荐阅读
- html - 如何解决 Django 模型表单不保存
- python - 尝试在 Mac 上使用 os.makedirs 创建目录时权限被拒绝
- java - 在 Java 的 try 块中调用不会引发异常的方法是一种好习惯/不昂贵吗?
- python - Pandas:将 Yfinance 字典转换为数据框,但该行为空
- sql - JOIN 的 SSIS 最佳实践
- r - 为什么我在尝试 replace_with_na_all 时没有识别列名,因为我将它放入了我的 tibble?
- java - Spring Boot 默认错误消息不符合 Jackson 的属性命名策略
- c - 如何将堆栈跟踪中的数字地址转换为符号?
- python-3.x - 如何加入标签列表而不将它们转换为字符串?
- javascript - 从 AJAX 发送文件并从 PHP 检索