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!