Javascript, make element draggable!!

search for: in: entire forum this post
you are here: root => Tech Tutorials => Javascript, make element draggable!!
member since:
folders:
3
posts:
7
replies:
0

Javascript, make element draggable!!

I was working on http://freelocaldating.mobi/ and needed a javascript function to make an element draggable with the mouse. I already had a function for this that I had ripped off some random site years ago and it has recently stopped working so I wanted to find a new one but couldnt find a good one that was short and working well. So I decided why not make one, I can figure that out. So I did make one and I was so happy with my result, my code is short and sweet and it works on every browser that I have tried, including Internet Explorer in normal mode and in compatibility mode. So here it is:

code:
//===========makeDraggable intercode.ca=================
var mouseX; var mouseY; var dragObject = null; //global variables that are needed
if (document.addEventListener){document.addEventListener('mousemove',mouseMove,false);document.addEventListener('mouseup',mouseUp,false);} //event handlers
else if (document.attachEvent){document.attachEvent('onmousemove',mouseMove);document.attachEvent('onmouseup',mouseUp);} //old ie fix!!
function mouseMove(event) {
	if(dragObject) { //were dragging something
		var Xdifference=event.clientX-mouseX; var Ydifference=event.clientY-mouseY; //calculate movement
		dragObject.style.position = "absolute"; dragObject.style.left = dragObject.offsetLeft + Xdifference + "px"; dragObject.style.top = dragObject.offsetTop + Ydifference + "px"; //move the object that we are dragging
	}
	mouseX=event.clientX; mouseY=event.clientY; //update global variables about mouse position
}
function mouseUp(ev){dragObject = null;} //mouse up, stop dragging
function makeDraggable(object){ //the function that makes an object draggable
	if (object.addEventListener){object.addEventListener('mousedown',function(){dragObject = object;},false);}
	else if (object.attachEvent){object.attachEvent('onmousedown',function(){dragObject = object;});}
}
//===========makeDraggable intercode.ca=================



And here is an example on how to use it:

code:
<!DOCTYPE html>
<html>
<head>
<script>

//===========makeDraggable intercode.ca=================
var mouseX; var mouseY; var dragObject = null; //global variables that are needed
if (document.addEventListener){document.addEventListener('mousemove',mouseMove,false);document.addEventListener('mouseup',mouseUp,false);} //event handlers
else if (document.attachEvent){document.attachEvent('onmousemove',mouseMove);document.attachEvent('onmouseup',mouseUp);} //old ie fix!!
function mouseMove(event) {
	if(dragObject) { //were dragging something
		var Xdifference=event.clientX-mouseX; var Ydifference=event.clientY-mouseY; //calculate movement
		dragObject.style.position = "absolute"; dragObject.style.left = dragObject.offsetLeft + Xdifference + "px"; dragObject.style.top = dragObject.offsetTop + Ydifference + "px"; //move the object that we are dragging
	}
	mouseX=event.clientX; mouseY=event.clientY; //update global variables about mouse position
}
function mouseUp(ev){dragObject = null;} //mouse up, stop dragging
function makeDraggable(object){ //the function that makes an object draggable
	if (object.addEventListener){object.addEventListener('mousedown',function(){dragObject = object;},false);}
	else if (object.attachEvent){object.attachEvent('onmousedown',function(){dragObject = object;});}
}
//===========makeDraggable intercode.ca=================

</script>
</head>
<body>
<div id="grabz" style="background-color:#CCCCCC;width:200px;height:200px;border:black solid 2px;">drag me</div>
<div id="grabz2" style="background-color:#CCCCCC;width:200px;height:200px;border:black solid 2px;">drag me</div>
<div id="grabz3" style="background-color:#CCCCCC;width:200px;height:200px;border:black solid 2px;">drag me</div>

<script>makeDraggable(document.getElementById("grabz"));</script>
<script>makeDraggable(document.getElementById("grabz2"));</script>
<script>makeDraggable(document.getElementById("grabz3"));</script>
</body>
</html>



And here is this example in live so you can try it out:

drag me
drag me
drag me


*code was edited on 20th of jan 2014 to not override other onmousemove or onmouseup events.

Enjoy!
post #46
permalink

moderators of this post

envis (level: ∞)
powered by Nodesforum