Glitches while dragging the element fastly-CodePudding

I want to make a whole div draggable but i want to cahnge its position dynamically while dragging using a specific child of that div (i.e. other area inside that div wont let you move it). I have written a code snippet but it glitches when i move my cursor more rapidly.

Here is the codesandbox link: codesandbox link

Here is the an example: https://qzqlyk.csb.app/

Thanks in advance!!!

CodePudding user response：

Well, that is happening because your onMouseMove event listener is on box2 div. so event is triggered when you move cursor when it is hovering over box2. So when you rapidly move mouse, it goes outside of box for a moment and it does not trigger event.

You can put onMouseMove={dragMouseMove} on div with class "App" like this:

<div className="App" onm ouseMove={dragMouseMove}>

and in style you can put this:

.App {
      font-family: sans-serif;
      text-align: center;
      width: 100vw;
      height: 100vh;
}