CODEWITHSUNDEEP
javascriptcsshtml
GibboK
GibboK

Reputation: 73918

Simulating dragging for DIV, issue with fast moving mouse pointer

I need to simulate a dragging effect, basically when an user click and kept hold the mouse on a DIV, it should be re-positioned accordingly to mouse coordinates (following the mouse).

This script works fine:

http://jsbin.com/vurumupoqu/1/

Except when a user click and hold very near the edge of the DIV and move FAST and far away the mouse outside the DIV, in this case is not being dragged at all.

I have tried several option with mouseleave and mouseout with not success.

I need the DIV being dragged even if the user move fast the mouse when key is hold anywhere on the page.

I would like to know:

Upvotes: 1

Views: 2342

Answers (1)

Raphael Müller
Raphael Müller

Reputation: 971

Bind the mousemove event handler to document instead of the element itself:

document.addEventListener('mousemove', function (event) {
    console.log('+ mousemove')
    this.logicDrag();
}.bind(this));

http://jsbin.com/deyiwaqeqa/2/

Explanation

A mousemove event is not triggered for every pixel when you move the mouse around. This means that the mouse might have left #target - before #target has been moved to match the new mouse position.

Upvotes: 8

Related Questions