Move Depending on Mouse State

Question

I need my users to be able to move an element away from the mouse pointer by holding the left button down, and the element should move closer when the button is up. So far, I have this:

var divName = 'follow'; // div to follow mouse
// (must be position:absolute)
var offX = 0; // X distance from mouse
var offY = 0; // Y distance from mouse

function mouseX(evt) {
    if (!evt) evt = window.event;
    if (evt.pageX) return evt.pageX;
    else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    else return 0;
}

function mouseY(evt) {
    if (!evt) evt = window.event;
    if (evt.pageY) return evt.pageY;
    else if (evt.clientY) return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    else return 0;
}

function follow(evt) {
    if (document.getElementById) {
        var obj = document.getElementById(divName).style;
        obj.visibility = 'visible';
        obj.left = (parseInt(mouseX(evt)) + offX) + 'px';
        obj.top = (parseInt(mouseY(evt)) + offY) + 'px';
    }
}
document.onmousemove = follow;

function discharge() { //Move away
    offX += 1;
    offY += 1;
 }

function pull() { //Come closer
    if (offX > 0) {
        offX -= 1;
    }
    if (offY > 0) {
        offY -= 1;
    }
}
document.onmousedown = discharge;
document.onmouseup = pull;

offX and offY are the distance the element is from the mouse. In addition, this is just one part of the script. offX and offY come into play in a different part, which works except for this push/pull.

EDIT: Updated to include whole file and here is a fiddle.

More info: My main goal was to have an image within a div follow the mouse and move closer/further depending on the mouse's state. If anyone has a different way to achieve this, it would be greatly appreciated as well.

Answer 1

Here's a complete example using JQuery:

var divName = 'follow'; // div to follow mouse
// (must be position:absolute)
var offX = 0; // X distance from mouse
var offY = 0; // Y distance from mouse
var mouseX;
var mouseY;
var mouseState = 0;
var _this = this;

function follow(evt) {
  if(_this.mouseState === 1) {
    discharge();
  } else {
    pull();
  }
    if (document.getElementById) {
        var obj = document.getElementById(divName).style;
        obj.visibility = 'visible';
        obj.left = evt.pageX + _this.offX + 'px';
        obj.top = evt.pageY + _this.offY + 'px';
    }
}

document.onmousemove = follow;

function discharge() { //Move away
    _this.offX += 1;
    _this.offY += 1;
}

function pull() { //Come closer
    if (_this.offX > 0) {
        _this.offX -= 1;
    }
    if (_this.offY > 0) {
        _this.offY -= 1;
    }
}

$(document).mousedown(function(e){_this.mouseState = 1;});
$(document).mouseup(function(e){_this.mouseState = 0; });

Answer 2

What you want requires two offsets, those of the mouse and those of the element.

var offX = 100; // mouse X-axis
var offY = 50;  // mouse Y-axis

var elemOffX = 950; // elem X-axis
var elemOffY = 600; // elem Y-axis

// Now get the distance from the elem to the mouse:
var diffX = offX - elemOffX; // get the diff X
var diffY = offY - elemOffY; // get the diff Y

// Depending on your interval you might want to change the factor,
// this will move it in steps of 10%
var newOffX = offX + (diffX * 0.1); // set this as new result for the element's X
var newOffY = offY + (diffY * 0.1); // set this as new result for the element's Y

• Please note, I havent tested this for bugs, this is to show a principle. Might be that you need to change the newOff's + to a -

  ---

In you example you do this: offY-1, you need to change that to offY=offY-1 or offY-=1