Dragging an element with mousemove handler stops tracking if mouse moves too quickly

Question

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});
 });

Fiver

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. – Atropine

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. – Fiver

Just bind the element to id or class not relative to some parent with this. – Whop

Answer 1

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.

Lockjaw