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:

/

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:

• How to fix this issue? (I meanly target latest Chrome and Firefix).
• Could be a better option using HTML5 drag? If yes why?

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./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:

• How to fix this issue? (I meanly target latest Chrome and Firefix).
• Could be a better option using HTML5 drag? If yes why?

• javascript
• css
• html

Share Improve this question Follow edited Apr 29, 2015 at 9:21 GibboK asked Apr 29, 2015 at 9:16 GibboKGibboK 74k148148 gold badges451451 silver badges674674 bronze badges 2

• Since you have jQuery tagged in this post, why not use jQuery? jqueryui./draggable It's all done for you, all you need to do is tell jQuery what element(s) you want to bee draggable. As simple as $( "#ElementID" ).draggable(); Once you link to the jQuery library. – NewToJS Commented Apr 29, 2015 at 9:20
• Sorry.. I have added my mistake the jquery tag, now has been removed. I need to solve this issue with vanilla js. Thanks for your ment and help. – GibboK Commented Apr 29, 2015 at 9:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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./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.