Learn Javascript Tutorials, CSS Tutorials, HTML Tutorials and jQuery Tutorials

Learn CSS, HTML, JavaScript, jQuery and Ajax step by step from beginning to advance with examples and references. Apart from that, beginners can learn tricks and tips.more>>

Thursday, July 10, 2008

Drag Div with Cursor using JavaScript

Event Handling
For this context, we generally use window.event method for creating drag functionality with the help of javascript.

First of all, we need take the position of mouse or cursor within the document with the help of clientX for X position of mouse, clientY for Y position of the cursor.


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Drag Div</title>
<script language="JavaScript" type="text/javascript">

function abc()
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;
// catch possible negative values in NS4
// if (tempX < 0){tempX = 0}
// if (tempY < 0){tempY = 0}
// in the text fields named MouseX and MouseY
//document.Show.MouseX.value = tempX;
//document.Show.MouseY.value = tempY;

element.style.marginLeft = tempX + "px";
element.style.marginTop = tempY + "px";



<body onload="abc();">
<div id="x" style="background:#FFCC33; padding:10px; width:150px;">This is Testing!!</div>

See other useful Events


petertparker said...

Hi Nice Blog web development services designs custom sites for businesses and non-profit organizations. We can build a site of any size that will reflect the spirit and flavor of your organization. We can rebuild sites that are out-dated or that fail to attract your target audience. We build web sites from anywhere; we work with organizations all over the North America. Best of all, we are not done until you are satisfied.We design customized banners, buttons, and embellishments for your website. We can also implement flash animation, a customized intro page, and other special features. All pages include descriptor tags and keywords for search engine indexing.

Web Design Quote said...

This is the great way to learn from the tutorial and here are the opportunity for the newcomer to learn from this regarding the drag div and cursor javascript. So this is the great thing to be don.

Anonymous said...

Ich denke, dass Sie den Fehler zulassen. Ich biete es an, zu besprechen. Schreiben Sie mir in PM, wir werden umgehen. levitra online viagra bestellen [url=http//t7-isis.org]levitra 20mg wirkung[/url]

Anonymous said...

Penso che fare errori. Dobbiamo discutere. Scrivere a me in PM, parlare. [url=http://lacasadicavour.com/kamagra-oral-jelly/ ]acquisto cialis [/url]Parlare nel merito http://lacasadicavour.com/kamagra/ generico cialis Mi dispiace, ma, a mio parere, si sbaglia. Cerchiamo di discutere di questo.

Anonymous said...

zotv bvcvm porno pifqlk l pq r tmd

Anonymous said...

I love javascript-guru.blogspot.com! Here I always find a lot of helpful information for myself. Thanks you for your work.
Webmaster of http://loveepicentre.com and http://movieszone.eu
Best regards

Anonymous said...

unlock iphone 4
how to unlock iphone 4

unlock iphone 4 unlock iphone 4 how to unlock iphone 4
unlock iphone 4

unlock iphone 4 unlock iphone 4 [url=http://theunlockiphone4.com]how to unlock iphone 4 [/url] how to unlock iphone 4

online viagra said...

Your blog is outrageous! I mean, Ive never been so entertained by anything in my life! Your vids are perfect for this. I mean, how did you manage to find something that matches your style of writing so well? Im really happy I started reading this today. Youve got a follower in me for sure!