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)
- draggable div (3)
- moving objects along with cursor using javascript (3)
- Draggable div using javascript (3)
- js simple div drag (3)
- simple div drag javascript (2)
- draggable div javascript (2)
- move a <div> along with mouse using jquery (2)
- how to move image along with cursor using javascript code (2)
- move the div element along with mouse cursor using jquery (2)
- js simple draggable div (1)
- mouse cursors movement detect php script (1)
- move image along with mouse pointer javascript (1)
- move image along with cursor javascript (1)
- movable div javascript tutorial (1)
- move element along with mouse using javascript (1)
- move div with mouse (1)
- move a div in javascript using mouse (1)
- move div javascript (1)
- move div with cursor in JQuery (1)
- jquery thumbnail cursor dragging (1)
- jquery page turn mouse click mouse drag (1)
- jquery change cursor using custom image (1)
- jquery change draggable cursor during move (1)
- jquery div position follow cursor (1)
- jquery drag a div -ui (1)
- jquery drag along line (1)
- jquery drag div by mouse (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)
- move text along with cursor in javascript (1)
- move text caret based on drag javascript (1)
You will also be interested in ,
- Suppress javascript errors on your webpage easily
- Disabling right click menu using javascript Enhanced Version
- Add a splash page using javascript
- Javascript webpage load timer, display time taken to load a webpage
- Close Event In Javascript For Firefox, IE and Chrome
- Adding and removing child nodes using javascript and DOM
- Replace all non alphanumeric characters using javascript
- Close Event In Javascript Using OnUnload()
- How to close a child window from a parent window using javascript
- Drop down menu going behind flash element
