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:
1

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
member since:
folders:
0
posts:
0
replies:
1
The gamers make the scripts on the java software that are not for the dragging down and to lose the games. Java subject was my best subject and the custom term paper writing servicealso love to teach the java codes.
post #980
permalink

moderators of this post

envis (level: ∞)
powered by Nodesforum