dragOver is not fired

[Maxouhell]

• I'm submitting a ... [x] bug report [ ] feature request [ ] question about the decisions made in the repository
• Do you want to request a feature or report a bug?

Report a bug

• What is the current behavior?

When I move an element in a list (I use a sortable list), onDragOver isn't fired.

• 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.

Just create a little list and move elements to see the bug (nothing appear) :

export class AppComponent {
    private datas = [
        {label:'test'},
        {label:'test2'},
        {label:'test3'},
        {label:'test4'},
        {label:'test5'},
    ];

    dragOver(event) {
        alert(event)
    }
 }

<ul dnd-sortable-container [sortableData]="datas" [dropZones]="['test']">
    <li *ngFor="let data of datas; let i = index" dnd-sortable [sortableIndex]="i" (onDragOver)="dragOver($event)">{{data.label}}</li>
</ul>

• What is the expected behavior?

Event must be fired

• Please tell us about your environment:
• Angular version: 2.0.0-rc.6 (I've also tried on rc.5)
• Browser: Chrome 52.0.2743.116
• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc) I've searched a solution, and if I remove this._elem != this._sortableDataService.elem in this file https://github.com/akserg/ng2-dnd/blob/master/src/sortable.component.ts#L134 event is fired but this._elem and this._sortableDataService.elem are identical...

Is that a bug, or did I do something wrong ?

[aziz-haddad]

Is this issue still not fixed, because I have the exact same problem

[Aalphones]

Same problem here. Still no fix for this?

[jorroll]

The problem appears to be caused by the fact that sortable._elem !== sortable._sortableDataService.elem when ondragover is called. As far as the component is concerned, when you drag item A over item B, item A's ondragover event is being fired, when instead item B's ondragover event should be fired. I can't find any way of fixing this.

HOWEVER, ondragenter and ondragleave seem to fire normally / correctly. I wanted to manually run change detection whenever a sortable list item is dragged over another one (and update the sorting during dragging). I did something like the following which works:

  @ViewChildren(SortableComponent) sortables: QueryList<SortableComponent>;  

  ngAfterViewInit() {
    this.sortables.toArray().forEach(sortable => {
      sortable._elem.ondragenter = (event) => {
        if ((<any>sortable)._isDropAllowed(event)) {
          sortable._onDragEnterCallback(event);
          this.ref.markForCheck();
        }
      }
    })
  }