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

Popular posts from this blog

Spring Elasticsearch Operations

Network Error and Timeout on Authorize.net JS

Object oriented programming concepts (OOPs)