Question

I am working on a little home grown project that allows users to drop 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

Answer 1

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

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