Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by John Weland
John Weland
42,478 Points

Drag and Drop

So I use mint.com to manage my budgeting etc. Their current budget layout isn't the greatest, while it allows you to add budgets and sub-items under the budget it doesn't indent them and thus it can get confusing to look at.

eg.

Auto & Transport Auto & Transport : Gas & Fuel Auto & Transport : Auto Insurance

I am trying to make a mockup to post in their user forums with better grouping.

eg.

Auto & Transport --Auto & Transport : Gas & Fuel --Auto & Transport : Auto Insurance

I have that done and in collapsible groups but I want to add drag and drop functionality to this mockup/demo so you could drag and reorder full groups or drag and reorder the sub items within the group. I've never really coded drag and drop and it looks and feels very overwhelming. I haven't found any good courses/tutorials on it either

here is my pen with groupings and collapsible groups.

http://codepen.io/johnweland/pen/DnfAG

any help is appreciated.

2 Answers

Wayne Priestley
Wayne Priestley
19,579 Points

Hey John,

There are some good articles on drag and drop on css tricks that might help you out.

Hope this helps.

John Weland
John Weland
42,478 Points

I'll check it out, skimming over it on my phone this weekend however I felt I needed something a little more tutorial oriented. Thanks for the reply and now that I'm back at a proper computer I'll get to digging around.

John Weland
John Weland
42,478 Points
John Weland
John Weland
42,478 Points

I read a few of those articles and then had better verbiage to better google more articles. I got something functional enough to show off the hi-fi mock up I was working on. Thanks. I still think Nick Pettit or maybe Joy Kesten should do a course on it.