0

While adding an Item within cdkDropList it comes to available left most position because of the data sorting property, but I would like to stop the auto arrange feature in my cdkDropList. Is it feasible? If yes then how?

Also is it possible to get the XY co-ordinate of those child items? need some help.

<div cdkDropList [cdkDropListData]="items" cdkDropListDropped)="drop($event)">
    <div cdkDrag [cdkDragData]="item" *ngFor="let item of items;">
        {{item.name}}
    </div>
</div>
Saumya
  • 35
  • 3

1 Answers1

0

Are you doing anything in response to the drop event? You are supposed to move items around in the backing array yourself.

Example adapted from the official docs:

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}

You also have to import moveItemInArray from @angular/cdk/drag-drop.

Gabriel Negut
  • 13,860
  • 4
  • 38
  • 45
  • Yes I have used the function to move the item index, but I am concern about the position of items. For example, I have a drop list with 500px and each of my item width is 100px. That means I have space for five items in the cdkDropList. Now I want to add two items in 2nd and 4th position of the list, rest places will be blank. Is it possible? – Saumya Apr 18 '19 at 16:04
  • If I understood your question correctly, all you need are items with empty names in your backing array, so `items` will contain `[blank, item1, blank, item2, blank]` (`blank` being the item with empty name). – Gabriel Negut Apr 18 '19 at 16:10
  • Gabriel Negut Yes, you are partially correct. Only the `blank` means a blank space, no item with empty name because I can add new items at those space later or can drag existing two items at those positions. – Saumya Apr 18 '19 at 17:41
  • You can always use some custom logic (instead of `moveItemInArray`) to replace blanks with "real" items instead of swapping their positions, depending of what exactly is your desired behaviour. – Gabriel Negut Apr 23 '19 at 08:08