1

I have this data which i'm dragging

  <tbody cdkDropList [cdkDropListData]="ListData">
                              <tr *ngFor="let list of ListData" cdkDrag>
                               ...
                               </tr>
  </tbody>

i want to drag a particular row and drop in second container

 <li *ngFor="let user of userData; index as i;"> 
  <div cdkDropList [cdkDropListData]="UserList" (cdkDropListDropped)="drop($event,user.Id)" cdkDropListSortingDisabled> 

..
</li>

i want to get the dragged item data in drop function

drop(event: CdkDragDrop<string[]>,Id) {
event.previousContainer.data[event.previousIndex];
}

tried the above code but this is picking the current drag data

any solution

thanks

user3653474
  • 3,393
  • 6
  • 49
  • 135
  • 1
    You didn't set the `[cdkDropListConnectedTo]`? Wonder how this can even work... [Here's a good sample](https://bootstrap.mintplayer.com/additional-samples/drag-drop) and [here's the code](https://github.com/MintPlayer/mintplayer-ng-bootstrap/tree/master/apps/ng-bootstrap-demo/src/app/pages/additional-samples/drag-drop) – Pieterjan Mar 01 '23 at 18:23

1 Answers1

0

For that you can use the cdkDragData attribute:

Inside your cdkDropList which is fed by ListData you have instances of lists which are rendered as cdkDrag elements. Here you should add the [cdkDragData] attribute, whose data is determined by each list object. In your situation it should look something like that:

<tbody cdkDropList [cdkDropListData]="ListData">
   <tr *ngFor="let list of ListData" cdkDrag [cdkDragData]="list">
      ...
   </tr>
</tbody>

The object content of each list can then be accessed on a drop event in your drop function as follows:

drop(event: CdkDragDrop<string[]>,Id) {
   //save the dragged object data to a constant variable
   const draggedItemData = event.item.data;
}

Like Pieterjan mentioned you should also look into the [cdkDropListConnectedTo] attribute which lets you drop draggable elements between different lists pretty simply.

MariusAquarius
  • 21
  • 4