Adding a draggable div along with the cursor using simple javascript
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
Related posts:
- Adding and removing child nodes using javascript and DOM
- Simple Javascript Slideshow
- Simple CSS Dropdown Menu
- Simple Ajax with PHP click tracker
- Load Another Webpage Content Using Simple Jquery
- Learn CSS Basics Very Simple Tutorial
- Adding apache handlers in cpanel
