Draggables

UX experiment - An alternative way for a user to pass data between web sites

Reviews - Drop Form

You can drag a review draggables onto the form below to automatically fill it in. Open the example draggable review page in a new window. Drag the cube from the review page onto the box below.

Drop review here...

Drag and drop files from your desktop

Some of the latest browsers now support the new HTML5 File and Drag-Drop APIs, which allow files to be dragged from the desktop into the browser. Any HTML document containing the correct microformat, in this case hReview, will be parsed and used to fill the form. Draggables also supports zipped HTML files as long as the name of the zipped file is index.htm.

Creating a resume drop zone

Creating a draggables drop zone is a two-step process. First add the HTML mark-up for the drop zone and then add the draggables JavaScript.

1. Adding the HTML mark-up

You can use any HTML element you wish as a drop zone. To create the right degree of user feedback the example below uses a box icon which highlights when an object is dragged over it. Draggables supports this type of interaction by adding the class dropTargetOver to the drag zone element as the user interacts with it.

<div class="dropArea" id="dropDiv">
   <span>Drop article here...</span>
</div>

The CSS for the rollover effect

.dropArea
{
   background-position: center 1em;
   text-align: center;
   position: relative;
   -moz-border-radius: 1em;
   -webkit-border-radius: 1em;
   border-radius: 1em;
   border: 1px solid #eee;
   background-image: url('box.png');
   background-repeat: no-repeat;
   display: block;
   padding: 1em;
   padding-top: 6em;
   margin-bottom: 2em;
   width: 10em;
}
.dropTargetOver
{
   background-image: url('box-selected.png');
}

2. Adding the code

There are two JavaScript files (draggables-drop.min.js and microformats-hreviewdefinition.min.js) you must include in the page to add the drop zone. Once you have added these files to the header of your page you need to add the addDropItem method. This method takes a simple JSON configuration object with a number of properties which are explained below.

<script src="draggables/draggables-drop.min.js"></script>
<script src="draggables/microformats-hreviewdefinition.min.js"></script>

draggables.addDropItem({
   'dropZone': 'dropDiv',
   'formats': ['hReview'],
   'mappings': [
      ['forms[0].summary', 'hreview[0].summary'],
      ['forms[0].description', 'hreview[0].description'],
      ['forms[0].reviewer', 'hreview[0].reviewer.fn'],
      ['forms[0].dtreviewed', 'hreview[0].dtreviewed'],
      ['forms[0].rating', 'vcard[0].rating'],
      ['forms[0].city', 'hreview[0].item.adr[0].locality'],
      ['forms[0].state', 'hreviewd[0].item.adr[0].region'],
      ['forms[0].isoCountryCode', 'hreview[0].item.adr[0].country-name']
   ],
   'onDataDrop': 'proccessData',
   'preLoadImages': ['draggables/box-selected.png']
});

function proccessData(json) {
    // Add javascript to work directly with the json data
};

Properties of the addDropItem configuration object

dropZone
The HTML tag id on which a user can drop their draggable. Takes a single value.
formats
The microformats that will be accepted. This can be a single or multiple value
mappings (optional)
A list of mapping pairs. Each pair is an array of two items the first is either a HTML tag id or a form field name. The second item is a string expression referencing the data passed. For further information please read the Mapping page
onDataDrop (optional)
The name of a function to be called when a user drops data on the drop zone. For further information please read the onDataDrop page
preLoadImages (optional)
The URLs of any images you would like pre-loading. Used mainly for the drop box rollover.