Javascript - Drag & Drop

Simply copy and paste the following code inside an html page and run it from a browser (tested on IE & Mozilla).
If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> /*define the style and size of the dragging area*/ #area{width:200px;height:200px;background-color:#dfdfdf} .folder{width:150px;height:20px;background-color:#5092CC;clear:both;color:white} /*here you can add more folders to drag to and even create some dynamically*/ #fold1part{background-color:orange;height:auto;min-height:20px} #fold2part{background-color:orange;height:auto;min-height:20px} li a{color:white} </style> <script type="text/javascript"> /*set some var to keep track of the origin and the size of the dragging area*/ var x=0; var y=0; var origx=0; var origy=0; /*global variable containing the draggable area*/ var areax= 180; var areay= 180; /*set some var to keep track of the object being dragged and the original folder from which the object was moved*/ var dropobj= null; var objtodrag=null; var origfolder=null; /*function to get the mouse coordinates - browser detection*/ function getcoord(evt) { var IE=false; if(navigator.appName == "Microsoft Internet Explorer") IE = true; if(IE) { x = evt.clientX + document.body.scrollLeft; y = evt.clientY + document.body.scrollTop; } else { x = evt.pageX; y = evt.pageY; } } /*retrieve the object being dragged and its position, then apply an absolute style*/ function startdrag(evt,idelt) { if(objtodrag) return false; objtodrag = document.getElementById(idelt); origfolder = objtodrag.parentNode; objtodrag.style.cursor='move'; objtodrag.style.position = 'absolute'; movedrag(evt); origx=x; origy=y; } /*move the object according to the mouse motion except if mouse gets over the area*/ function movedrag(evt) { if(!objtodrag) return false; getcoord(evt); /*clear the link field by adding an extra 60 pixels ahead of the mouse*/ if(x < (areax + origx)) objtodrag.style.left = x - 60 + 'px'; if(y < (areay + origy)) objtodrag.style.top = y + 'px'; } /*drop the object on mouse up (append the object to the right folder)*/ function dropmouse() { if(!objtodrag) return false; if(dropobj) { objtodrag.style.position = 'relative'; objtodrag.style.left = '0px'; objtodrag.style.top = '0px'; dropobj.appendChild(objtodrag); } else { objtodrag.style.position = 'relative'; objtodrag.style.left = '0px'; objtodrag.style.top = '0px'; origfolder.appendChild(objtodrag); } objtodrag= null; origfolder= null; } /*retrieve the folder being flied over*/ function dropobjo(dropob) { if(!objtodrag) return false; dropobj=document.getElementById(dropob); } </script> </head> <body> <h1>Drag and Drop Example</h1> <p>Drag the links inside the area:</p> <div id="area" onmousemove="movedrag(event);" onmouseup="dropmouse();"> <div id="fold1" class="folder" onmouseover="dropobjo('fold1part');">FOLDER 1</div> <ul id="fold1part" onmouseover="dropobjo('fold1part');"> <li id="link1"><a href="#">Link 1</a><span onmousedown="startdrag(event,'link1');">(+)</span></li> <li id="link2"><a href="#">Link 2</a><span onmousedown="startdrag(event,'link2');">(+)</span></li> </ul> <div id="fold2" class="folder" onmouseover="dropobjo('fold2part');">FOLDER 2</div> <ul id="fold2part"> </ul> </div> <p> Pass over the folders and drop the links.</p> </body> </html>

Note: this script detects the browser version in order the be compatible on different type of user system, you can easily add more browser detection conditions for additional compatibility.

Comments

Post the first comment now
or discuss about it at this address:
Forum - Javascript

Webmaster Corner

The Millionaire league
Dozens of Easy and Automatic Ways to Make Money Online Everyday!

Niche Annihilation Method
Crush Your Competition!
Download the method Now

iPowerWeb
Incredible Membership Packages - Web Hosting!

One Month Free Trial! ProStores - an eBay Company
Gain customers, increase sales, and boost profits with your own Web Store.

→ Get Google Pay-Per-Click Ads Free!
→ Automated Cash Formula $$$

Javascript - Drag & Drop

Javascript - Drag & Drop

Comments

Webmaster Corner

Categories