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

Question

I have a timeline with rows and I want to move items between rows of the timeline. For that I am using angular-cdk drag and drop and every row is a cdkDropList. When moving the lines between the different lists I want to keep the original style of the dropped item, but the after dropping the item into the other list, the item takes on the style of the items in the other list. If I am moving the items inside the same list, I can change the style of the item.

I set up a stackblitz: https://stackblitz.com/edit/angular-opuyuk

You can see, if you move items between the lists, the style changes to the list items, but when moving the item inside its own list, the style can be changed.

I also noticed another thing: if the row is empty, I cannot drag a another item into it, I suspect it has something to do with the css and grid layout I am using, any ideas on that? — D. K.

Muhammad Rehan Muhammad Rehan · Accepted Answer · 2021-07-19T10:11:48

You need to keep the styles/cssClass in TypeScript: [example][1]: [1]: https://stackblitz.com/edit/angular-9vnaqy?

Just For your case you need to create a common interface or class

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

or maybe you want to handle it with a dynamic class depends on how you want to solve the HTML side.

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;",
  },
];

Pre populate the list of objects in array and connect the cdkDropListData with the desired array.

Now be assure if you want to use css in typescript you must clean it for the DOM

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

Or you can use only the css/SCSS class name aswell.

finally use the sanitized css in Html element:

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

Feel free to comment with your thoughts, would appreciate it if accepted as an answer.

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

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

1 Answers