Drag doesn't work consistently in Chrome.

[DiegoSestito]

I have a list with many elements that are dragged. The amount of these elements is variable. When I have many draggable elements, some of them behave as if they are not draggable at all. This happens in Chrome and Edge, but not in Firefox. Is this a known issue related to chromium-based browsers?

[BertMaurau]

Can confirm! It does work flawlesly in Firefox, but in Chrome (only one tested), it only works with a few pixels at the end of the draggable container (or the handle).

It does not require a lot of draggable items (I only have 10 in total), the first 6 are draggable from anywhere in the entire element (or the handle), the last 4 only via the most right sided 10px give or take on an element that is 400px wide for example.

When trying to drag those elements (not via those 10 pixels), I can see stuff happening in the 'Dev console > Elements', but it does not trigger the actual "dragging of the element" effect.

[sighdok]

@DiegoSestito @BertMaurau Could you resolve the issue by yourself? Any advices for me would be great!

[reppners]

@DiegoSestito @BertMaurau Can you point me to a reproduction or provide sample code?

[reppners]

Closing until reproduction or sample is available. Quick test on my own with many items did not show any issues.

[fhemery]

I know this issue has been closed for ages, but it did happen to me, and I found one explanation, so better add it here.

Context: I am working on a tree view, with folders that can be expanded and, of course, dragged around.

Symptoms: sometimes at start, of after manipulating my nodes for a while, I could not interact with the element anymore (like I could not even click on it to expand) This worked fine in Firefox, but not in Chrome.

Possible cause: I was using the (dragstart) and (dragEnd) events instead of (dndStart) and (dndEnd) to change some behaviour.

Code sample: Before:

<div class="sidebar__folder-line" (click)="toggleSelect()"
       [ngClass]="selected() ? 'selected' : ''" [dndDraggable]="folder.id">
    <div class="sidebar__folder-name" (dragstart)="folderDragStart()" (dragend)="folderDragEnd()" // <-- *** This fails ***
         dndHandle>{{ folder.name }}
    </div>
</div>

After:

<div class="sidebar__folder-line" (click)="toggleSelect()"
       [ngClass]="selected() ? 'selected' : ''" [dndDraggable]="folder.id"
       (dndDrag)="folderDragStart()" (dndEnd)="folderDragEnd()">     // <--  *** This works ***
    <div class="sidebar__folder-name" dndHandle>{{ folder.name }}
    </div>
</div>

Hope it helps!