Draggables

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

Article Draggables

The article information below is marked-up with the hAtom microformat and a script has been added to allow it to be dragged on to another page. Please open the articles 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 article

Experiments in Data Portability

On Tuesday, I gave a skillswap talk about some of the experimental work I have been engaged in. For the last few months I have had a growing interest in the current data portability design patterns used in social media sites. As we start to see the maturing of the earlier technologies such as OpenID and growth of some exciting new ones like OAuth and XRDS-Simple, focus is moving to the user experience. Through this presentation I try to look at current patterns of data portability that could be implemented now and look at some of the lessons that could be leant from the early adopters.

I showed some of what is currently possible using the Google Social Graph API coupled with a Microformats parser in a little application called the Social Network Explorer. The other major demo was my work on a Microformats API which makes use of OAuth to provide user controlled release of private data.

Finally I asked the question do we really own our data in the same way as we own other property. If the value of data decays over time should we be looking more at systems which make use of attention metrics...

Tags:

Posted: 30th Novenber 2008

Author: Glenn Jones

Creating a draggable article

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

1. Marking up HTML articles with hAtom

Although marking up articles with hAtom 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 hAtom.  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 article" 
  title="draggable article" 
  src="draggables/cube.png" 
/>

3. Adding the code

There are two JavaScript files (draggables-drag.min.jsgables-drag.min.js and microformats-hatomdefinition.min.js) you must include in the page to turn your articles marked-up with hAtoms into draggables. Once you have added the files to the header of your page you need to add the articles into draggables by using the addDragItem method. This method takes a simple JSON configuration object with a number of properties which are explained below.

<script src="draggables/draggables-drag.min.js"></script>gt;</script>
<script src="draggables/microformats-hatomdefinition.min.js"></script>

<script>

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

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