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>

9 comments:

Unknown said...

ralph lauren outlet
true religion outlet
jordan shoes
coach outlet
ugg outlet
nike air force 1
canada goose sale
gucci handbags
nike shoes
kevin durant shoes
20161228caiyan

chenlili said...

coach outlet
michael kors outlet
nfl jerseys wholesale
christian louboutin outlet
coach outlet online
canada goose outlet
canada goose outlet store
canada goose outlet
christian louboutin sale
pandora outlet
shenyuhang20180608

Unknown said...

20180623xiaoke
christian louboutin
oakley sunglasses wholesale
kd 10 elite
ray ban sunglasses outlet
pandora charms
true religion jeans sale
ralph lauren outlet
canada goose jackets
ugg boots on sale
chloe sunglassess

Varshini said...

Good post. Useful information. This is always happy to know about Salesforce training in Gurgaon whose certification program helps many to get certificed. I strongly urge you to join now in Salesforce Training in Hyderabad | Course Price | Training institute and enroll for free demo at Salesforce Training in Bangalore | Course Certification Cost and Job Placement Assistance . I have gone through this Salesforce Certification Training. Why done you enroll for a free demo at Salesforce training institutes in Chennai [updated] | Course Price

Babu said...

I enjoyed reading your article. Thanks for taking the time to post such a valuable article.
seo content writing tips
language similar to english
salesforce basics
star certification
hacking books

Aparna said...

This is the best post for this topic and Thank you!!!
PLC Training in Chennai
Content Writing Training in Chennai
Sales Training in Chennai
React JS Training in Chennai
WordPress Training in Chennai
Google Analytics Training in Chennai

Veera Kumar said...

Nice post and I am very happy to visit your blog. Keep doing...!
Oracle Training in Chennai
Oracle Training in Bangalore
Oracle Training in Coimbatore
Oracle DBA Training in Chennai

Susan said...

Find out today ‘s Celebrity birthdays and discover who shares your birthday. We make it simple and entertaining to learn about celebrities.

Saro said...

Thank you for your great post and this concept is very nice...!
Social Media Marketing Courses in Chennai
Social Media Marketing Online Course
Social Media Online Course
Sales Course in Chennai

Post a Comment

Cron Design Studio: Dublin based web design & software development