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
Incoming search terms:
- javascript draggable div (4)
- moving objects along with cursor using javascript (3)
- draggable div (3)
- Draggable div using javascript (2)
- how to move image along with cursor using javascript code (2)
- move the div element along with mouse cursor using jquery (2)
- move a <div> along with mouse using jquery (2)
- jquery drag div tutorial cursor move (2)
- simple div drag javascript (2)
- move div javascript (1)
- move div on webpage using javascript torrent (1)
- move a div in javascript using mouse (1)
- move div with cursor in JQuery (1)
- move div with mouse (1)
- move element along with mouse using javascript (1)
- moving a div along with the cursor using javascript (1)
- move image along with cursor javascript (1)
- move image along with mouse pointer javascript (1)
- move text along with cursor in javascript (1)
- move text caret based on drag javascript (1)
- movable div javascript tutorial (1)
- mouse cursors movement detect php script (1)
- jquery drag open div (1)
- jquery draggable div example (1)
- jquery draggable div tutorials (1)
- jquery draggable div with mouse (1)
- jquery move cursor (1)
- jquery move div (1)
- jquery move div by drag (1)
- jquery move div by the cursor (1)
- jquery move div mouse (1)
- jquery move div to cursor (1)
- jquery page turn mouse click mouse drag (1)
- jquery thumbnail cursor dragging (1)
- line move with cursor using css (1)
- line position move with movement cursor using css (1)
- jquery drag div by mouse (1)
- move the div along with the pointer (1)
- mover div com jquery (1)
- scroll div drag mouse jquery (1)
You will also be interested in ,
- Change first letter of each word in a form field from lowercase to uppercase
- Javascript Popup Chromeless Window
- Displaying Text from User On Your Webpage
- Javascript Title Bar Message Changer
- Javascript Alert Message Box When Clicking A Link
- Javascript webpage load timer, display time taken to load a webpage
- Words Validation with Javascript
- Javascript Clock
- Finding The Size Of Images Using Javascript
- Get browser window size using javascript
