Shoutbox

wtf you are you people on about its not that complex

your element looks like this
<div id="moveme" style="position:absolute;left:0px;top:0px;background:blue;width:90px;height:90px;"></div>

you get the reference to that div by going

code:

---

var element = document.getElementById('moveme');

---

you add an event listener for mousemove

code:

---

document.addEventListener('mousemove',test,false);

---

you have another event listener for mouse down and mouse up

code:

---

document.addEventListener('mouseup',testOff,false);
element.addEventListener('mousedown',testOn,false);

---

then you have three functions which control this , one to turn it on , one to turn it off and one to move the element.

code:

---

var ismoving = false
var dx = 0;
var dy = 0;

function testOn (e){
ismoving = true;
//now you have to get the orginal click point
dx= e.clientX - parseInt(element.style.left);
dy= e.clientY - parseInt(element.style.top);
}

function testOff(e){
if(ismoving){
//this helps to stop that slight jumping when you release a drag then drag it again.
dx= e.pageX - parseInt(element.style.top);
dy= e.pageY - parseInt(element.style.left);
}
ismoving = false;
}

function test(e){
if(ismoving){
//minus the current mouse position from the orginal location.
var left= e.clientX-dx;
var top = e.clientY-dy;

//now we move the element.
element.style.left = left + 'px';
element.style.top = top + 'px';
}
}

---

thats the basic idea behind the dragging.  then you would save the location in the testOff function and get a php script or something to move the element back there when the page loads.