Restore HTML5 drag and drop object to original div container

Question

I can't seem to find any examples on allowing a site user to 'undo' a drag and drop action. For example, if the user drags an image to a target element and then decides to use a different image, the user should see the previous thumbnail image back in the original position. I've experimented with several techniques including the effectedAllowed Copy but alas, it moves, not copies. ugh.

I did find a jquery shopping cart example but I think I'd rather use the HTML5 method unless that's just a bad idea.

The project is a simple invitation app where the user can drag a thumbnail representing another person into 1 of 5 openings - like "Pilot", "CoPilot", "Navigator", "Helmsman", "Steward".

Suggestions?

Answer 1

It sounds like you need to implement a state machine in javascript if there isn't already a library to facilitate this.

For concepts around managing state, see this question and it's answers: undo-redo-implementation

Edit: also, here is a javascript implementation