Why would entering an element with mouse button held down interfere with further mouse events?

Question

On my site in progress, you can see a row of cards at the bottom. If you hover over them, it will show a larger version of that card. The larger version is draggable.

There's a strange edge case bug with this where if you enter the row of cards with your mouse button held down as you enter, then release, then try to click and drag-- dragging will not work.

I have set careful breakpoints and watched-- all the listeners are firing as normal, except that the onMouseMove listener that tracks the cursor for dragging stops firing after you move roughly 2 pixels from where you were when you started the drag. If you just move the cursor back and forth 1-2 pixels, it works. But as soon as you move more than that, the onMouseMove event stops firing altogether on that element. It starts firing again when you release the mouse. It's as though entering with the mouse down has inverted the events, yet it works normally within a 2px range of starting point.

I cannot think of any explanation for this behavior. Why would entering with the mouse button held down cause onMouseMove to stop firing if you moved more than 2 pixels from where you start the drag?

Additionally, when the attempted drag fails, this unfamiliar image appears next to the cursor until you release the button:

Can anyone identify this icon so I can look it up?

Answer 1

According to OP’s comment, the solution was to call event.preventDefault() in all (drag-related?) event listeners.