The JavaScript Source: Miscellaneous : Drag and Drop by className

Click here

Home

Miscellaneous

Drag and Drop by className

Assign a specified class to a div tag and you will be able to drag and drop it. Very useful and easy to implement.

Drag number ONE

Drag number TWO

The JavaScript Source: Miscellaneous : Drag and Drop by className
Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

 .drag { width: 200px; height: 200px; position: absolute; border: 1px solid black; background: silver }  /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: Michael Burt :: http://mburt.funpic.org */ var ie = document.all var ns = document.getElementById && !ie function dragbyclass(e) { var fobj = ns ? e.target : event.srcElement if (fobj.tagName=="DIV" && fobj.className=="drag") { var ev=e||event var offsetx=ev.clientX-fobj.offsetLeft var offsety=ev.clientY-fobj.offsetTop document.onmousemove=function() { fobj.style.left=ev.clientX-offsetx fobj.style.top=ev.clientY-offsety return false } fobj.onmouseup=function() { document.onmousemove=null } } } document.onmousedown=dragbyclass  <script type="text/javascript" src="dragAndDrop.js"></script>  <div class="drag" style="left:40px;top:60px;z-index:100">Drag number ONE</div> <div class="drag" style="left:40px;top:60px">Drag number TWO</div>
Did you use this script? Do you like this site? Please link to us!

Add a comment, suggestion, or correction

Click here

Sign up for the Web Development Daily Newsletter

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

Click here