For those not familiar, paperdolls are figures cut out of paper that come with sets of paper clothing and accessories. The clothing can be attached to the dolls by folded rectangular tabs.
Over the weekend I took a scan of a cotton paperdoll and turned it into an interactive website that allows you to dress the paperdoll online:
To make this, I first cut the paperdoll and her accessories out of a jpg scan and turned them into pngs. I then contained each png inside of a DOM element and enabled draggable functionality on them using jQuery UI.
Each DOM element is a div with a unique id and a shared class, “draggable.” Each id specifies a background png with coordinates for the location it will take when the page is first loaded or refreshed.
The shared class is used to specify “cursor: move” in the CSS. It is also used to enable dragability on all DOM elements containing the “draggable” class. Here’s how the jQuery looks:
$( “.draggable” ).draggable();