Draggables

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

Friends Draggables

The friends list information below is marked-up with the hCard/XFN microformats and a script has been added to allow it to be dragged on to another page. Please open the friends list drop 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 friendsFriends draggable co-workersCo-workers

Andy Budd, Clearleft, User Experience Director

  • +44 (0)1273 123456 work
  • +44 (0)7966 654321 cell

Jane Dallaway, Madgex, Development Team Manager

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

James Wragg, Madgex, Front-end Developer

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

Jeremy Keith, Clearleft, King Of The Wild Frontier

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

This list of friends contacts is marked-up with hCard

draggable friends Friends

This list of friends contacts is marked-up with both hCard and XFN

Creating a draggable friends lists

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

1. Marking up HTML friends lists with hCard and XFN

Although marking up friends lists with hCard and XFN 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 Card and the microformats cheat sheet (PDF)F) 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 simplele.

If you wish to tag the hCards with data explaining the relationships between the page owner and contacts in the friends list you can use the hCard-XFN pattern. Please make sure that you add the hCard uid class to the XFN hyperlink, this will help others join the data from the two formats.

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 friends" 
  title="draggable friends" 
  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 freinds list marked-up with hCards into draggables. Once you have added the file to the header of your page you need to add the freinds list 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 three separate friends lists. Each references one of three drag icons.

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

<script>

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

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

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

</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.