Angular cdk 拖放：拖放到其他容器后保持元素样式

Question

我有一个包含多行的时间线，我想在时间线的各行之间移动项目。为此，我使用 angular-cdk 拖放，每一行都是一个 cdkDropList。在不同列表之间移动线条时，我想保留掉落项目的原始样式，但在将项目放入另一个列表后，该项目采用另一个列表中项目的样式。如果我在同一个列表中移动项目，我可以更改项目的样式。

我设置了一个 stackblitz：https://stackblitz.com/edit/angular-opuyuk

您可以看到，如果您在列表之间移动项目，列表项目的样式会发生变化，但是当在其自己的列表内移动项目时，样式会发生变化。

Answer 1

您需要在 TypeScript 中保留 styles/cssClass： [示例][1]： [1]: https://stackblitz.com/edit/angular-9vnaqy?

只是为了您的情况，您需要创建一个通用接口或 class

  class theItems{
    name:String;
    styleClass:String;
  }

或者你想用动态处理它 class 取决于你想如何解决 HTML 方面。

dones:theItems[]=[
    {
    name:    'Get to work',
    styleClass:"grid-column: 2/5; background-color: red;",
  },
    {
    name:    'Brush teeth',
    styleClass:"grid-column: 2/5; background-color: red;",
  },
    {
    name:    'Take a shower',
    styleClass:"grid-column: 2/5; background-color: red;",
  },
];

todos:theItems[]=[
  {
    name:     'Get to work',
    styleClass:"grid-column: 1/11; margin: 0 10px; background-color: #00B7A8;",
  },
  {
    name:    'Pick up groceries',
    styleClass:"grid-column: 1/11; margin: 0 10px; background-color: #00B7A8;",
  },
  {
    name:     'Go home',
    styleClass:"grid-column: 1/11; margin: 0 10px; background-color: #00B7A8;",
  },
  {
    name:       'Fall asleep',
    styleClass:"grid-column: 1/11; margin: 0 10px; background-color: #00B7A8;",
  },
];

预先填充数组中的对象列表，并将 cdkDropListData 与所需的数组连接起来。

现在确保如果你想在打字稿中使用 css 你必须为 DOM

清理它

 safeCss(style) {
    return this.doms.bypassSecurityTrustStyle(style);
}

或者您也可以只使用 css/SCSS class 名称。

最终在 Html 元素中使用经过消毒的 css:

[style]="safeCss(item.styleClass)"

请随时发表您的想法，如果被采纳为答案，我们将不胜感激。

https://stackblitz.com/edit/angular-9vnaqy?

Angular cdk 拖放：拖放到其他容器后保持元素样式

Angular cdk drag an drop: keep element style after drop into other container

css

drag-and-drop

angular

angular-cdk