0

I have a drag and drop system in which users can drag and element and that dragging should, of course, match the mouse movement. To update the element's position, I use the mouse move events's movementX and movementY properties.

It turns out that in one machine it works great as is. I just use the values coming from movementX and movementY without adjusting for the window.devicePixelRatio and the dragging matches the mouse movement.

On another machine I need to divide movementX and movementY by window.devicePixelRatio to get the movement to match the mouse pointer on the screen.

Both machines report a window.devicePixelRatio value of 2.

My question is: what other variable is at play here? Both machines are using the same application. How can in one application the dragging match while in the other it require's adjustment if both have the same devicePixelRatio?

We're both on Google Chrome 100, on a Mac.

What am I missing?

Edy Bourne
  • 5,679
  • 13
  • 53
  • 101
  • Are they both retina displays? Also consider the Warning at the top of [MDN `movementX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX) – fnostro May 18 '22 at 20:02
  • Good question... they are not. I believe the disclaimer at the page you listed is the root cause of this problem. How can one get a consistent value for mouse movement across devices then? I imagine there must be a way given that so many drag and drop systems work fine across browsers and OSs. – Edy Bourne May 19 '22 at 14:57
  • Unfortunately I have no answer for that without doing a deep dive. As you say it's been done, so I'm sure there is a module or library out there, or even a blog about it. – fnostro May 19 '22 at 17:15

0 Answers0