Drag HTML element: How to handle if the mouse moves outside the div?

Question

I'm creating a draggable div, like in this example: http://jqueryui.com/draggable/

Everything works fine, but if I move the mouse fast, and the mouse leaves the div, then it stops following the mouse. I use elem.addEventListener("mousemove", function(e) {/* ... */}, false); and if I change the last attribute to true, then it still doesn't works as it should be. The div follows the mouse, as long the mouse is inside the div.

I would like to fix it, without using JQuery

Answer 1

You should use:

 elem.addEventListener("mouseup", function(e) {

 }, false);

 elem.addEventListener("mousemove", function(e) {

 }, false);

 elem.addEventListener("ondragstart", function(e) {

 }, false);

You can find a tutorial to implement Drag-n-Drop using native JavaScript here: http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

I would recommend the following HTML5 solution

Here's JS Fiddle: http://jsfiddle.net/v4pd25s3/

Also, check a full-fledge HTML5 solution: http://blog.teamtreehouse.com/implementing-native-drag-and-drop

http://blog.teamtreehouse.com/implementing-native-drag-and-drop

Answer 2

Try to put the mousemove event on the document so it captures the event on the whole page, not only when the mouse hovers the div.

This means that the event will be fired everytime the mouse moves and it is on the page.