Get the index of where something was dropped

[mcblum]

• I'm submitting a ... [ ] bug report [ ] feature request [ x ] question about the decisions made in the repository

• Do you want to request a feature or report a bug? I'm not totally sure. This is working really well, except I don't see any way to get the index of where something was dropped. We have a source list and a target list, and elements can be dropped from the source list to the target, and then they can be sorted within the target. This is all working very well, but I can't seem to be able to add an element at a specific position. Meaning, I'd like to drag an element from the source to the target and when it's dragging over scoot the existing elements in the target to accommodate the new element.

• What is the current behavior? Currently sorting works but only after the element has been dropped in the target list.

• What is the expected behavior? It would be awesome to be able to drop an element from the source to the target and have it land right in place at a particular index.

• What is the motivation / use case for changing the behavior? Saving the user time and not having to reorder once dropped.

• Please tell us about your environment:

• Angular version: 4

• Browser: Chrome

Thank you for this awesome library!

[mcblum]

Just a quick followup to this - I did get the multi-list sortable thing working, but the issue is now that items in the source list should not be reorderable and a copy should be made when items are dragged from the source to the target. If anyone has any ideas, please let me know!

Here's the target list:

                <div class="schema-list"
                     dnd-droppable
                     [dropZones]="['schema']"
                     (onDropSuccess)="addElement($event)">
                    <div class="schema-element-sortable-wrapper" dnd-sortable-container [sortableData]="schema">
                        <app-object-card label="{{element.label}}"
                                         *ngFor="let element of schema;let i = index;"
                                         dnd-sortable
                                         [sortableIndex]="i"
                                         icon="{{element.icon}}">
                            <div class="body">
                                {{element.description}}
                            </div>
                        </app-object-card>
                    </div>
                </div>
            </div>

This is working, it's just that the elements are not sortable until they are added to the list.

[2advancesolutions]

Here how i got the item of the drop array const dropElement = $event.mouseEvent.path[0]; const dropItem = dropElement.innerText; dropList.indexOf(dropItem)to find the dropIndex

I got the $event from (onDropSuccess)="transferDataSuccess($event)" method