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


Chris Parfitt
Chris Parfitt
65 Points

Build a drag and drop tool to build a triptych. Want to revert dropped items when container is full. Help!? :)

Hi there!

Thanks so much in advance for any help or direction here! I'm not very familiar with javascript yet.

I'm trying to build a drag and drop tool where the user can build a triptych by dragging and dropping images from a selection area into 1 of 3 droppable areas.

You can see the jsfiddle with all the code here: http://jsfiddle.net/lonetreedesign/shLQE/277/

QUESTION: Is there a way I can make a droppable area not accept any more droppable items once an item has already been dropped there?

PROBLEM: when the user tries to drop a second image into one of the three droppable areas, I want it to restrict access and revert the new image being dropped back to the starting location. Right now it's just pushing the images down and adding it.

Additionally, i'd love for the dropped image be able to re-arrange around eachother - in other words, if you drop the image from droppable area 1 into droppable area 2, the image from droppable area 2 swaps places and moves to droppable area 1. I know this works with the sort function, but I don't know if there's a way to get them to do this since they're in separate droppable areas. But my primary concern right now is the question above.

Thanks again for any direction on this!