onDragSuccess not firing.

[crooksey]

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

• What is the current behavior?

So currently I am using ng2-dnd without issue, I create dragable divs by looping through arrays, such as exampled below. My array length might generate say 12-14 dnd divs, this is no problem. What I want to happen is, each time I drop an item, into a new div, my onDropSuccess fires, and notifies my component of the new "key" value for which the Dropped item now resides, this works perfectly.

So my next requirement, was for my component to know which key had items "dragged from it" then I found the "onDragSuccess" function, however this does not throw any errors, but it simply does not work, am I using it correctly? E.g. when I initiate a drag event (before I have actually dropped it) I want to notify my component that I have started dragging.

<div class="col-sm-3" *ngFor="let key of keys">
        <div class="card card-outline-warning">
            <div dnd-sortable-container [sortableData]="routes[key]">
                <ul class="list-group" >
                        <li  *ngFor="let item of routes[key]; let i = index"
                            class="list-group-item" dnd-sortable [sortableIndex]="i"
                            (onDropSuccess)="getRouteDropKey(key)" 
                            (onDragSuccess)="getRouteDragKey(key)">
                            {{item.name}}
                        </li>
                </ul>
            </div>
        </div>
</div>

Now, this does work when I drag one item from its own list, into itself. E.g. if I move the position of an item in my list to a new location, however it does not fire when I move items between lists. Note these are all the same component.

• Please tell us about your environment:

• Angular version: 5.X.X

• Browser: [all |

[crooksey]

So I have come up with a temporary workaround/hack to make this work as expected, when I get chance I will look at a permanent fix, because I have an application that uses this library quite extensively, anyway for now, the below should get you out of trouble...

Adding the onDragStart event:

(onDragStart)="onDragEvent(data)"

This will fire as soon as you start dragging, so just implement some backend code/logic to make this event fire after onDropSuccess has finished, e.g.:

<li *ngFor="let foo of bars; let i = index"
    class="list-group-item" dnd-sortable [sortableIndex]="i"
    (onDropSuccess)="dropFunction(foo)" 
    (onDragStart)="dragFunction(foo)">
    {{foo.name}}
</li>

Then on the backend:

public dragTest = false;
dropFunction(foo) {
  // whatever your drop code does
  if (this.dragTest === true) {
  // code you want to fire onDragSuccess
  this.dragTest = false;
  }
}
dragFunction(foo) {
  this.dragTest = true;
}

[oleg08]

I have a similar code but the function dropMyProjects is not always called, in about two cases out of ten

This is one of my drag-lists:

• {{my_project.name}}

dropToMyProjects ($event: any) { console.log('my drop'); }

Without solving this problem, I can not move on

[GrayYoung]

I have the same issue. If the container is also sortable, will not trigger onDropSuccess event.