Drop is dropping into multiple targets

[ranjith88]

• I'm submitting a ... [ ] bug report

• Do you want to request a feature or report a bug?

• What is the current behavior?

I have Single source and multiple targets.

For Eg: I have a source with 5 rows. This is in a table.

On the Target side we have 3 tables. Now Drag and Drop is working but it is dropping the data into all the three targets. How do I distinguish the targets. I am not talking about restrictions. But when i drag into table 1 on the target it is getting dropped to all the 3 tables on the target side and same time I want it to delete from the Source side.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.

• What is the expected behavior?

Need the dragged row to be moved only to the dragged one.

• What is the motivation / use case for changing the behavior?

• Please tell us about your environment:

• Angular version: 5.2.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Code:

Document Type	Year
{{px.DocType}}	{{px.Year}}

    <div class="col-lg-9">
        <div>
            <div class="border border-dark" dnd-droppable (onDropSuccess)="addTo($event)">
                <table class="table table-bordered mb-2">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col">Document XYZ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let target of targetList">
                            <td>{{target.DocType}}</td>
                            <td>{{target.TaxYear}}</td>
                        </tr>
                    </tbody>
                </table>
                </div>
            <div>
                <table class="table table-bordered mb-2">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col">Document XYZ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let target of targetList">
                            <td dnd-draggable sortable="true" [dragData]="target">{{target.DocType}}</td>
                            <td dnd-draggable sortable="true" [dragData]="target">{{target.Year}}</td>
                        </tr>
                    </tbody>
                </table>
                <table class="table table-bordered mb-2">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col">Document XYZ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let target of targetList">
                            <td dnd-draggable sortable="true" [dragData]="target">{{target.DocType}}</td>
                            <td dnd-draggable sortable="true" [dragData]="target">{{target.Year}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

on Coponent.ts

targetList: DocumentType[] = []; addTo($event: any) { this.targetList.push($event.dragData); }