How to find the target container while dropping item in angular material 12?
I am using the angular material 12 version drag and drop feature. I have two connected divs while dropping the item I want to identify whether the source (item dragged container) container and target container(item dropped container) are the same or not. Thanks in advance. please find below the code
<div class="toc_listing" cdkDropList [cdkDropListData]="table_list" [cdkDropListConnectedTo]="table_toc"
#list_toc="cdkDropList" (cdkDropListDropped)="drop($event)">
<p *ngFor="let item of table_list" cdkDrag>
<span class="icons"><i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<i class="fa fa-ellipsis-v" aria-hidden="true"></i></span>
<span class="list-no"></span>
<span class="list-name"></span>
</p>
</div>
<div class="table responsive-table">
<table class="table">
<thead>
<td>t.no</td>
<td>name</td>
<td>type</td>
<td>population</td>
<td>actions</td>
</thead>
<tbody cdkDropList [cdkDropListData]="toc_list"
#table_toc="cdkDropList" (cdkDropListDropped)="drop($event)">
<tr *ngFor="let item of toc_list" cdkDragLockAxis="x" cdkDragLockAxis="y" class="dragdrop_table">
<td></td>
<td (click)="viewEditor(item)" data-toggle="tooltip" [matTooltip]="item.selected ? 'Edit Mockshell':'Mockshell is not selected'"></td>
<td></td>
<td></td>
<td>
<p class="edit" data-bs-toggle="modal" data-bs-target="#editTableOfContent" *ngIf="!item.selected" (click)="editTable(item)"><i class="fa fa-pencil" aria-hidden="true"></i>
</p>
<p class="delete" (click)="deleteTable(item, $event)" *ngIf="!item.selected"><i class="fa fa-trash-o" aria-hidden="true"></i></p>
</td>
</tr>
</tbody>
</table>
</div>
Comments
Post a Comment