23 August 2010

Javascript: Simple, Drag & Drop element class - multiple draggable elements on one page.

I found a tonne of these drag & drop functions online but they were all either too big & bloated or relied heavily on external libraries. The one I did find that was small and usable triggers chrome bug 7423 because it captures the mousedown event for the page. So I've written my own and posted here for your convenience.
See Demo (Internet Explorer ain't supported)
Tested in Firefox and Chrome. IE will take some tweaking

THE FILE: (Please see right hand pane before download!)
http://www.crondesign.com/projects/downloads/dragable.js



IN HEAD:
<script src="dragable.js" type="text/javascript"></script>



ON PAGE LOAD OR AT FOOT OF PAGE:

<script type="text/javascript">
    makeDragable('myTitleBar','myPopup');
</script>
myTitleBar should be replaced with the ID of the element you want the user to click
myPopup should be replaced with the ID of the element you want to move around



MULTIPLE DRAGABLE ELEMENTS ON ONE PAGE:

<script type="text/javascript">
    makeDragable(['myTitleBar1','myTitleBar2'], ['myPopup1','myPopup2']);
</script>
Cron Design Studio: Dublin based web design & software development