6

I've set up a mousemove handler to drag an element. However, if you move the cursor too quickly, it loses track of the element and doesn't move it anymore until you bring your cursor back over the element.

Here's a JSFiddle demo.

Why does it do that?

 $this.on("mousemove.partmove touchmove", function(e){
     e.preventDefault();
     var moveL = e.clientX; 
     var moveT = e.clientY;
     console.log("mov " + (moveT-vOffset) );
     $this.css({"left": moveL-hOffset, "top": moveT-vOffset});
 });
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
brentonstrine
  • 21,694
  • 25
  • 74
  • 120
  • 6
    if you track the mousemove from the body element, you can't overshoot the element without leaving the window. If you are listening from a child element, moving the mouse out of the element's boundaries stops that mousemove handler. Note- touch move events do continue to reference the original touchstart element no matter where subsequent events arrive from. – kennebec Nov 14 '14 at 04:45
  • I see what you're saying. The cursor was going outside of the element I was dragging and that was causing the problem. I needed to bind the `mousemove` handler to a larger parent element, such as `body`. – brentonstrine Nov 14 '14 at 04:52
  • Just bind the element to id or class not relative to some parent with this. – Sheki Nov 20 '20 at 12:59

1 Answers1

2

i had the same problem. the only thing that i've done was that i define mousemove event for its parent element. that way it can tracks the location of pointer even if you move it fast.

erfanmashari
  • 311
  • 3
  • 7