angularangular-material

How can i get dragged item data in metarial drag and drop


I'm learning angular. My first application is todolist. I'm trying to develop it by using nodejs and mongodb. There are three container such as todos doings and dones. When i drag an item from todos to doings i want to handle it's id. How can i do that ?

      drop(event: CdkDragDrop<string[]>) {
        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);
        }

              ///TODO handle dragged item id,title or someinformation


      }

Solution

  • You can pass data to a drag-gable item like this:

    <div cdkDrag [cdkDragData]="todo" *ngFor="let todo of todos"></div>
    

    The data, in this case your todo item will be available in the event object.

    drop(event: CdkDragDrop<string[]>) {
      console.log(event.item.data);
    }