I am trying to disable the "auto sorting/shifting" animation of the *Drop List*. What I mean is, given a vertical list of draggables, when I drag the top element downward, the other elements visibly shift upward. This is cool for *re-sorting*, but I am doing a *swap*. Additionally, my draggable elements are lined up with other elements on the screen, so for the duration of the drag, when the drop list is moving its elements around, everything looks skewed.

For context, this is for a D&D Character creator, where the 6 stats (Str, Dex, Con, Int, Wis, and Cha) are in a vertical, non-draggable row. The drag-drop list of numeric values are along side it. When I drag the Str score down to swap with the Int score, then for the duration of the drag, the Dex score shifts up to Str, Con shifts up to Dex, etc. Everything works itself out on drop, but I don't want this behavior.

Ideally, the dragged element will leave a "shadow" of itself in the list, to prevent the other elements shifting around, but I'd be just as happy with like a blank space, or a gray space, or anything like that.

I *have* seen this behavior, but only on accident. I think it has to do with dragging components (instead of divs), but that seems more like a bug than a feature.

**Is there a way to keep the drop list elements from shifting during a drag?**

```html
<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>

```