buttons with dndDraggable / dndHandle are not draggable in Firefox

[reppners]

Version?

[ivopan]

Same here, I have just started testing this library. Chrome works, firefox does not. OS is Ubuntu 18.04, Firefox 61.0.1. Everything actual (from Ubuntu repositories). Developing using vscode and agular-cli.

ng --version: `Angular CLI: 6.0.8 Node: 8.10.0 OS: linux x64 Angular: 6.0.9 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.8 @angular-devkit/build-angular 0.6.8 @angular-devkit/build-optimizer 0.6.8 @angular-devkit/core 0.6.8 @angular-devkit/schematics 0.6.8 @angular/cdk 6.4.1 @angular/cli 6.0.8 @angular/material 6.4.1 @ngtools/webpack 6.0.8 @schematics/angular 0.6.8 @schematics/update 0.6.8 rxjs 6.2.2 typescript 2.7.2 webpack 4.8.3`

[reppners]

Thx for the detailed info. I've tested by using the demo at https://reppners.github.io/ngx-drag-drop/ with Firefox 61.0.1 on macOS and Ubuntu 18.04 - both work without issues.

Can you reproduce with a stackblitz? https://stackblitz.com/edit/ngx-drag-drop-issue-template

[ivopan]

Thanks for info. Yes, I can verify that example really works in Firefox. I have just tested my app on macOS - Safari works, Chrome works, Firefox does NOT work. So something else should be causing the problem. My app is relatively large and uses exclusively Angular + Angular Material. I will try to figure it out, but debugging drag&drop won't be easy. Yes - one more thing, somewhere else in the same app I use ng2-file-upload and is also uses drop. But my guess is it does not cause problem with Firefox.

[ivopan]

I have more info - perhaps I have found it. It WORKS in firefox ... but not fully! I have div dropzone, inside that div dndPlaceholder and then items are populated using *ngFor. It works for items, that were present on component start, BUT when I add new components later to the array, they are visible (of course) but they are NOT draggable. It seems that in firefox there is a problem with reinstantiating draggable directive after change.

[reppners]

Thanks, that's very helpful! I'll try to reproduce and report back my findings.

[ivopan]

Hmm, I had a time to test it more and with simple items (handle and div with text) it works! So problem is somewhat complex. But my data are not so complicated = div with handle few buttons and div with text. I will try to strip it down step by step ...

[ivopan]

Aha. More info - it depends on dndHandle (I need to use it). This code works: ` <div *ngFor="let x of dndTestData2" [dndDraggable]="x" dndEffectAllowed="copyMove" (dndStart)="onDragStart($event)" (dndEnd)="onDragEnd($event)">

drag_handle

                <span>{{x.code}}</span>
            </div>

`

And this code does NOT work = drag does not start: ` <div *ngFor="let x of dndTestData1" [dndDraggable]="x" dndEffectAllowed="copyMove" (dndStart)="onDragStart($event)" (dndEnd)="onDragEnd($event)">

drag_handle

                <div class="item">
                    {{x.code}}
                </div>
            </div>

`

The only difference is, that non working version has dndHandle on button = in this case angular material button. But both versions are rendered inside browser DOM directly under that draggable div tag.

[ivopan]

Hmm, still it is problematic. I have forgot to write that I am trying to sort list. (div's in div).

In Chrome I receive events in this order (inside my component): onDragStart, onDrop, onDraggable, onDragEnd.

While in Firefox I receive this: onDragStart, onDraggable, onDragEnd

• so onDrop is not generated
• after drop the class dndDragover is not removed from dropzone item = div in my case
• while being dragged the "dndPlaceholder" element is not moved to proper place, it stays all the time as the first element inside dropzone div

Placeholder is properly moved there - i have tested to put to both possible places = 1st or last element. It is properly removed from there, inserted as 1st element and left there.

So now I think the problem can be somewhere in DOM manipulation ... when the DOM is more complex.

[ivopan]

Here is full template: (I catch for testing all events but actually I need dndMoved only)

            <div dndDropzone [dndDisableIf]="!moreUsedItems" dndEffectAllowed="copyMove" (dndDrop)="onDrop($event)" [dndHorizontal]="false"
                class="column dndList">
                <div *ngFor="let si of data.usedItems" class="usedItem" [dndDisableIf]="!moreUsedItems" [dndDraggable]="si" dndEffectAllowed="copyMove"
                    (dndStart)="onDragStart($event)" (dndEnd)="onDragEnd($event)" (dndCopied)="onDragged(si, 'copy')" (dndLinked)="onDragged(si, 'link')"
                    (dndMoved)="onDragged(si, 'move')" (dndCanceled)="onDragged(si, 'none')">
                    <!-- <button mat-icon-button [class.invisible]="!moreUsedItems" dndHandle>
                        <mat-icon>drag_handle</mat-icon>
                    </button> -->
                    <mat-icon dndHandle>drag_handle</mat-icon>
                    <button mat-icon-button (click)="redirectUsedItem(si.code)" i18n-matTooltip="@@Change_direction_sort_item_button" matTooltip="Change direction">
                        <mat-icon *ngIf="si.ascending">arrow_upward</mat-icon>
                        <mat-icon *ngIf="!si.ascending">arrow_downward</mat-icon>
                    </button>
                    <div class="item">
                        {{data.getLabel(si.code)}}
                    </div>
                    <button mat-icon-button (click)="unuseItem(si.code)" i18n-matTooltip="@@Remove_sort_item_button" matTooltip="Remove">
                        <mat-icon>delete</mat-icon>
                    </button>
                </div>
                <div dndPlaceholderRef class="dndPlaceholder"></div>
            </div>

[reppners]

Regarding buttons not being draggable - this is a bug in firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=568313

The other issue I'll have to reproduce, thanks for the template.

[ivopan]

Oh, I was not aware of that, thanks. I have replaced button with div => dnd now works but problem with proper placeholder was still there.

And I have (hopefully) found why: Simple usage of div and mat-icon inside caused the icon to be positioned to the top of div, so it was not vertically aligned with the rest ... and placeholder had problems. I have vertically centralized it using css and placeholder now works properly ! So now everything works.

Here are relevant code parts:

<div class="buttonLikeLayout" dndHandle>
    <mat-icon class="buttonLikeLayoutIcon">drag_handle</mat-icon>
</div>

.buttonLikeLayout {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    line-height: 40px;
    border-radius: 50%;
    cursor: grab;
    text-align: center;
}

.buttonLikeLayoutIcon {
    vertical-align: middle;
}

[reppners]

Glad you were able to solve your issues. I will leave this open until the firefox button thing is documented.