View Full Version : Cursor flying away from dragged element

Sep 18th, 2007, 10:46 PM
I have an issue... wrote a piece of code to drag a div around... My problem is that... if you move the cursor too wild... and the cursor leaves the div area then it stops moving.

Here are some code excerpts...

container.onmouseover = this.handle_hover;
container.onmousedown = this.handle_down;
container.onmousemove = this.handle_drag;
container.onmouseup = this.handle_up;

Code that links the events... and here are those methods...

function handle_down(e){
window.status = "Handling down " + this;
isSelected = true; //the component is selected
origCursX = getCursorX(e); //event.clientX;
origCursY = getCursorY(e); //event.clientY;
xNow = container.style.pixelLeft;
yNow = container.style.pixelTop;

this.onmousemove = handle_drag;
this.onmouseup = handle_release;

function handle_drag(e){
//window.status = "Calling drag... " ;
container = this;
container.style.left = (getCursorX(e) - origCursX) + xNow;
container.style.top = (getCursorY(e) - origCursY) + yNow;
//window.status = "yeah";
window.status = "Handling drag .... (" + xNow + "," + yNow + ") === (" + getCursorX(e) + "," + getCursorY(e) + ")" ;
else {
window.status = "Not selected";

function handle_up(){
window.status = "Handling up";
isSelected = false; //record the component as not selected
this.onmousemove = null;
this.onmouseup = null;

function handle_release(){
window.status = "Handling release";

I was thinkin that possibly I need to move the onmousemove event to the document object? Any ideas?

Sep 18th, 2007, 11:52 PM
I attach the mouse move handler to the document:

document.onmousemove = yourhandler;

That way, it always gets called even if you move the mouse too fast and it leaves your element.

Sep 19th, 2007, 12:15 AM
Still happens... for example. If i start draggin it from the bottom corner. If i drag too rapidly it leaves it. As if the cursor slips off of it. Should I be handling deselection when that happens or can that be avoided?

Sep 19th, 2007, 05:16 PM
do you have an example online anywhere?

I would need to see your code in action to diagnose the problem.