Adding a draggable div along with the cursor using simple javascript
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
Adding a draggable div along with the cursor using simple javascript,Incoming search terms:
- javascript move div with mouse (5)
- javascript drag div with mouse (3)
- drag div with mouse (3)
- write a program to move a text with mouse pointer using javascript (2)
- move text by mouse in javascript (1)
- move a text with mouse pointer (1)
- mover div con raton (1)
- mover div puntero (1)
- mover imagen en div x y mouse (1)
- moving a div along mouse pointer in jquery (1)
- simple drag div (1)
- using draggable event in javascript in jsp (1)
- wap to create a mouse pointer moving element in js (1)
- wap to move a text with mouse printer (1)
- Write a javascript program to move a text with mouse pointer (1)
- write a program to move a text with mouse pointer (1)
- write a program to move a text with mouse pointer in JavaScript (1)
- write a program to move text with mouse pointer (1)
- javascript move element with mouse (1)
- code for rating with drag with mouse in javascript (1)
- divison to move along html (1)
- drag along div copy java html (1)
- drag image with mouse to slide in javascript (1)
- Dragging a ball along with mouse pointer using html (1)
- dragging with mouse on div (1)
- example code how to move a text along with the mouse pointer in java script (1)
- how to add note to a mouse cursor in jsp (1)
- how to add text by dragging the mouse cursor in javascript (1)
- how to make a div move using the mouse javascript (1)
- html div draggable move (1)
- html drag div with mouse (1)
- javascript code to move a text with mouse pointer (1)
- javascript code to move all google images (1)
- javascript for clock moving along mouse (1)
- javascript movable divs php (1)
- writre the javascript code to move a text with a mouse pointer (1)