Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Obtains the name and ID of the dropped element

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>
like image 972
mark Avatar asked Feb 19 '20 17:02

mark


People also ask

How to get the ID of the draggable and droppable elements?

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

How to get the ID of a droppable?

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 ""

What is the drop target ID of an object?

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.

How do I remove the id attribute from an element?

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.


2 Answers

Try with this:

event.previousContainer.data[event.previousIndex]

If you want the id of the item:

event.previousContainer.data[event.previousIndex]['id]

like image 82
Leandro Matilla Avatar answered Oct 19 '22 00:10

Leandro Matilla


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">

like image 39
Frederick Avatar answered Oct 19 '22 00:10

Frederick