小编Ale*_*rdy的帖子

因此，我正在沙箱中工作，以模仿我希望实现此拖放操作的应用程序的环境。很抱歉这么啰嗦，但我真的想确保正确解释问题，因为我已经看到了几篇关于此的旧帖子未回答或回答错误问题的问题。

简洁版本

1. cdk dnd 不会自动滚动
2. 做了我自己的自动滚动
3. cdk dnd 滚动后不会掉落

诀窍是，cdk 拖放自动滚动功能似乎只能在与整个窗口大小相关的情况下开箱即用，或者如果它是带有溢出-y 的固定高度 div：滚动（这就是我正在尝试的）做），那么这需要在 cdkDropList 级别。不幸的是，由于我的应用程序的组件架构，目前这不是一个选项。

我编写了自己的自动滚动功能，该功能在拖动元素时根据鼠标的屏幕位置滚动 div，我可以正常工作，但最大的问题是，一旦 div 开始滚动，您就无法将项目拖放到元素中。列表。

这是我的父组件的 HTML（具有固定高度和溢出位置的 div）

<div #ScrollDiv style="height: 200px; width: 200px; overflow-y: scroll; padding: 5px;">
  <app-child (itemSelected)="itemSelection($event)"></app-child>
</div>

这是带有 cdk 指令的子组件模板

   <div cdkDropList style="border: 2px solid purple;" (cdkDropListDropped)="drop($event)">
    <div cdkDrag [cdkDragData]="draggers" *ngFor="let item of draggers; let i = index"
            style="height: 30px; border: 2px solid blue; margin: 5px"
            (mousedown)="grabDrag()">
            {{item}}</div>   
    </div>

此时，我可以在窗口中拖动，但自动滚动不起作用，因此我将自动滚动添加到父组件的 Type Script 文件中，更改 (mousemove) 上的滚动位置。对于开始向上/向下滚动的位置，这些值是基于我正在使用的页面上的硬编码。 …