1920 px

Ready state

3240 px

1080 px

1920 px3240 px

1080 px

Drag in progress

1920 px3240 px

1080 px

Drag complete

1920 px3240 px

1080 px

Draggable (image)

350 x 350

Draggable (image)

350 x 350

Draggable (image)

350 x 350

Droppable (image)

350 x 350

Droppable (image)

350 x 350

Droppable (image)

350 x 350

Background (image) 1920 x 970

1. In this case, the ‘draggable’ is a 350 x 350px image on a transparent background. The ‘live area’ in this example is 265 x 265px leaving the surrounding buffer for the target area, or ‘droppable’ to make contact.

2. There is an image behind the draggable which gives the user feedback that something is happening.

3. If the draggable is placed on the correct target, or droppable, additional feedback should be given that this particular drag operation is complete. If the draggable is placed on an incorrect target, it simply bounces back to its original position.

4. Once the drag operation is complete, the blurred feedback image in number 2 is replaced with a success image, rewarding the user with information.

5. The ‘droppable’, or target area is populated with a background image that is 430 x 430px with a live area also approx 265 x 265 px. The surrounding space is also used as a buffer to make contact with the draggable.