Adding a draggable div along with the cursor using simple javascript

by admin · February 25, 2010

Rating: 8.3/10 (7 votes cast)

In this tutorial we can see how to add a draggable div along with the cursor using simple javascript.

Only some simple javascript included and you can just copy and paste it in to a webpage you want the draggable content to be displayed.
DEMO

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1? />
<title>Draggable Div</title>
<script language="JavaScript" type="text/javascript">
function move()
{
< !–
var IE = document.all;
var tempX = 0;
var tempY = 0;
var element=document.getElementById("x");
document.onmousemove=function getMouseXY(abc) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX;
tempY = event.clientY;
} else { // grab the x-y pos.s if browser is NS
tempX = abc.pageX;
tempY = abc.pageY;
}
element.style.marginLeft = tempX + "px";
element.style.marginTop = tempY + "px";
}
}
//–>
</script>
</head>
<body onload="move();">
<div id="x" style="background:#ff0000; padding:10px; width:150px;">Div coming along with mouse!!</div>
</body>
</html>

Thanks Guys

Rating: 8.3/10 (7 votes cast)

Adding a draggable div along with the cursor using simple javascript, 8.3 out of 10 based on 7 ratings