I am using the cdk drag and drop library to drag and drop objects.
My problem is that I am not able to obtain the data (object information: name and ID) of the dropped object.
I've tried using console.log (event.item.data)
but it gives undefined.
Does anyone know how I can get the information about the dropped element?
Thanks
Stackblitz - Demo
.ts
drop(event: CdkDragDrop<string[]>) {
console.log(event.item.data)
if (event.previousContainer === event.container) {
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
}
html
<div class="six" style=" height: 75%;">
<div class="card-deck cardsZone">
<div class="card myCards">
<div class="card-body" style="overflow-y: auto;" #activeList="cdkDropList"
class="box-list" style="height:100%"
cdkDropList
cdkDropListOrientation="vertical"
[cdkDropListData]="A"
[cdkDropListConnectedTo]="[inactiveList]"
(cdkDropListDropped)="drop($event)">
<div *ngFor="let nw of A" cdkDrag>
<div class="card mysmallCcards">
<div class="card-body">
<span>{{nw.name}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="card myCards">
<div class="card-body" style="overflow-y: auto;" #inactiveList="cdkDropList"
class="box-list" style="height:100%"
cdkDropList
cdkDropListOrientation="vertical"
[cdkDropListData]="B"
[cdkDropListConnectedTo]="[activeList]"
(cdkDropListDropped)="drop($event)">
<div *ngFor="let pr of B" cdkDrag>
<div class="card mysmallCcards">
<div class="card-body">
<span>{{pr.name}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
To get the id of both the draggable and the droppable elements use the following: $('.selector').droppable({ drop: Drop }); function Drop(event, ui) { var draggableId = ui.draggable.attr("id"); var droppableId = $(this).attr("id"); } Sorry might be a little late for you but I have just started using jquery and needed the exact thing. Share
Answer to your question You will be able to get the ID in your droppable's dropcallback through the first parameter event. Pure JS Property: event.target.id- if ID is not set: empty string ""
In the drop method looks like ev is the event object, so ev.target will refer to the element on which the item was dropped. So use ev.target.id to refer to the drop target id. Show activity on this post. Thanks to @Arun P Johny. Excellent work on this simple example.
Use the removeAttribute () method to remove the id attribute from an element, e.g. element.removeAttribute ('id'). The removeAttribute method removes the passed in attribute from the element.
Try with this:
event.previousContainer.data[event.previousIndex]
If you want the id of the item:
event.previousContainer.data[event.previousIndex]['id]
The data of the item is just an input. The documentation for it is:
@Input('cdkDragData') data: T
Arbitrary data to attach to this drag instance.
So, to add the data to the event, you have to set it for each draggable element. Like this:
<div *ngFor="let nw of A" cdkDrag [cdkDragData]="nw">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With