derat/nup

Song rows aren't droppable when pointer enters element

Opened this issue · 1 comments

derat commented

I'm not sure if it's always been there, but in Chrome 105.0.5195.112, I'm seeing annoying behavior when dragging rows in song-table to reorder them where a red crossed-out circle is briefly visible for a single Y coordinate between each pair of rows. If I happen to end the drag there, the drop doesn't happen.

At first I thought that the #drag-target indicator div was responsible, but I see the issue when I set pointer-events: none on it or even leave it at display: none. Getting rid of the table's line-height: 1.2 doesn't help either.

I should check if this happens in Firefox, and also when using a low-res display -- this device has a pixel ratio of 1.600000023841858, which has triggered Chrome bugs in the past.

derat commented

I think that this happens whenever the pointer enters an element that doesn't cancel the dragenter event. The spec says that all DnD events bubble, and dragenter seems to bubble when I make a minimal test case, but for some reason my dragenter handler on document.body doesn't seem to be getting called here.

Adding another dragenter handler on the table element seems to at least fix the issue between song rows. I tried creating a fullscreen overlay element to handle all of the DnD events, but it wasn't receiving any events for some reason.