【问题标题】:Issues with dynamic height on CdkDropListCdkDropList 上的动态高度问题
【发布时间】:2020-02-27 20:34:56
【问题描述】:

我正在使用 CdkDragDrop 制作一个动态网格,可以通过用户拖放来重新构建它。我创建了这个 StackBlitz 来说明我的用例和我面临的问题https://stackblitz.com/edit/angular-rvv4g9

当我在同一行上有两个元素时,我想将其中一个元素放在一个空行上以将它们分开并创建一个新行。为此,我在所有行之间插入了空行,当您拖动项目时,它们以红色背景显示。由于我拖动的元素的高度相当大,我希望空行从小开始,并且在将项目插入其中时,使它们展开。

我面临的问题是,例如,如果您将元素“1”拖到它和“3”之间的行上,您可以看到行展开,然后继续将“1”向下拖到“ 3",你不能把物品放在那里。

我认为“放置区域”没有重新计算,并且被另一个已扩展的元素阻挡。

有谁知道重新计算放置区域的方法或我可以解决此问题的任何其他方法?

【问题讨论】:

    标签: angular angular-cdk


    【解决方案1】:

    您可以为此使用自定义拖动占位符:

    <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
    

    查看我的 Stackblitz:

    https://stackblitz.com/edit/angular-vy9yvj

    【讨论】:

      猜你喜欢
      • 2014-12-15
      • 2013-03-13
      • 1970-01-01
      • 2011-04-06
      • 1970-01-01
      • 1970-01-01
      • 2020-01-30
      • 1970-01-01
      • 2012-09-27
      相关资源
      最近更新 更多