Draggables

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

Resume Draggables

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

Glenn Jones

Summary

Glenn Jones is the founder/director of Madgex. Equally as passionate about interaction design and coding, he is currently addicted to exploring ideas of the semantic web and data portability.

Employment

Madgex - Founder/Director

Brighton, United Kingdom

December 2000Present

Madgex is a world leading supplier of job board products to the media industry. Its clients include The Guardian, The Times, Washington Post and many of the largest European B2B magazine publishers. We currently manage over 150 job boards for our clients. I founded the company with two former co-workers and we have taken it from a kitchen table to a well-respected multi-million pound enterprise. I still take an active role in the UX design of our products and promote innovation and user research within the company.

Virgin Atlantic AirwaysIntranet Architect

Crawley, United Kingdom

19982000 (3 years)

I helped designed the intranet from the ground up, directing the information design and the technical architecture. A major part of the project was constructing an environment that encouraged large scale independent contribution. My final focus at Virgin was creating a LDAP based MetaDirectory which provided contact and authentication services for the whole enterprise.

Education

University of Brighton

19851988 (3 years)

BA (Hons), 3D Materials Practice - Wood Metal Ceramics Plastics

Brighton, United Kingdom

Affiliations

Member of: Open Web Foundation

Skills

Contact details

Brighton, United Kingdom

Creating a draggable resume

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

1. Marking up HTML resumes with hResume

Although marking up resumes with hResume 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 hResume.  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 resume" 
  title="draggable resume" 
  src="draggables/cube.png" 
/>

3. Adding the code

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

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

<script>

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

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