About the Blog:

This blog is dedicated to all the front-end and UI developers who wants to excel their skills in CSS, HTML, JavaScript, jQuery, Ajax, Reactjs, Angularjs, Front-end standards and in Rich User Experiences. In this blog, we are sharing some useful tips and tricks along with the code snippet examples which will help you to build responsive and user friendly websites/web applications.

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.

Example:

<html>
<head>
<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");

//element.onclick=see();

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";
}

}
//-->
</script>

</head>

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

See other useful Events

7 comments:

Anonymous 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

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!