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

Contact - Drop Form

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

Drop contact 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 hCard, 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 contact 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 contact here...</span>

The CSS for the rollover effect

   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;
   background-image: url('box-selected.png');

2. Adding the code

There is a JavaScript file (draggables-drop.min.js) you must include in the page to add the drop zone. Once you have added this file 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>

   'dropZone': 'dropDiv',
   'formats': ['hCard'],
   'mappings': [
      ['name', 'vcard[0].fn'],
      ['forms[0].jobtitle', 'vcard[0].title[0]'],
      ['companyname', 'vcard[0].org[0].organization-name'],
      ['email', 'vcard[0].email[0].value'],
      ['nickname', 'vcard[0].nickname'],
      ['url', 'vcard[0].url[0]'],
      ['city', 'vcard[0].adr[0].locality'],
      ['state', 'vcard[0].adr[0].region'],
      ['isoCountryCode', 'vcard[0].adr[0].country-name'],
      ['zip', 'vcard[0].adr[0].postal-code']
   '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

The HTML tag id on which a user can drop their draggable. Takes a single value.
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 drag 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.