jQuery - Create shapes from menu

I am working on a little home grown project that allows users to dr开发者_StackOverflow社区op items onto an image. These items are contained within a on the left hand side of the page, for arguments sake lets say the items are as follows "Triangle", "Square" and "Circle". When you drag a circle from the left hand div onto the centre div I would like it to create an instance of that shape and place it on the centre div where I have selected.

How would people go about achieving this?

Many Thanks, Joel jsFiddle

jQuery UI provides $.draggable and $.droppable methods. An option in the $.draggable method allows you to make a "clone" -

$('#whatever').draggable({
  helper: 'clone'
});