Draggables

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

Contact Draggables

The contact information below is marked-up with the hCard microformat and a script has been added to allow it to be dragged on to another page. Please open the contacts form page into a new window and drag the cube icon below from this page into the box icon on the page you have just opened.

draggable contact

Work Contact Details

Glenn Jones, Madgex, Director
  • +44 (0)1273 123456 work
  • +44 (0)7966 654321 cell

work Suite 1 Clarence House 30-31 North Street Brighton East Sussex United Kingdom BN1 1EB

Website: http://www.madgex.com/

Commonly used username: glennjones

draggable contact

Home Contact Details

Glenn Jones
  • +44 (0)1276 123456 home
  • +44 (0)7966 654321 cell

home 30 Anyold Road Brighton East Sussex United Kingdom BN1 1XY

Website: http://www.glennjones.net/

Commonly used username: glennjones

Creating a draggable contact

Creating a draggables contact is a three-step process. First mark-up the article with hCard, then add the draggables icon to the page and finally add the draggables JavaScript.

1. Marking up HTML contacts with hCard

Although marking up contacts with hCard is a simple process it is rather a large subject to explain here. If you’re new to microformats I would recommend visiting the wiki page for hCard.  Brain Suda's microformats cheat sheet (PDF) is great for a quick reminder of what class names are used. If you want an in depth reference, try Emily Lewis's book, Microformats made simple.

2. Adding the draggables icon

The object that the user drags has to be an image. You have to give the icon an id, this will be used in the JavaScript configuration. It is also a good idea to add alt and title attributes to help with usability. 

<img 
  id="dragImage1" 
  class="drag-icon" 
  alt="draggable contact" 
  title="draggable contact" 
  src="draggables/cube.png" 
/>

3. Adding the code

There is a single JavaScript file (draggables-drag.min.js) you must include in the page to turn your contacts marked-up with hCards into draggables. Once you have added the file to the header of your page you need to add the contacts into draggables by using the addDragItem method. This method takes a simple JSON configuration object with a number of properties which are explained below.

The example below shows the draggables code that has been added to two separate contacts. Each references one of two drag icons.

<script src="draggables/draggables-drag.min.js"></script>

<script>

   draggables.addDragItem({
      'dragIcon': 'dragImage1',
      'dragIconSrc': ['draggables/cube.png', 'draggables/cube-selected.png'],
      'dataElements': 'hCard01',
      'formats': 'hCard'
   });

   draggables.addDragItem({
      'dragIcon': 'dragImage2',
      'dragIconSrc': ['draggables/cube.png', 'draggables/cube-selected.png'],
      'dataElements': 'hCard02',
      'formats': 'hCard'
   });

</script>

Properties of the addDragItem configuration object

dragIcon
The img tag id for the drag icon. Takes a single value.
dragIconSrc
URLs of the unselected and selected state of the drag icon. This is an array of two items, the first is the URL of the unselected image and the second is the URL of the selected image.
dataElements
The id for the HTML tag containing the microformats. This can be a single or multiple value.
formats
The microformats you wish to exchange during the drag and drop. This can be a single or multiple value.