Draggables

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

Event Draggables

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

Async - Show n Tell 3

Async has hosted JavaScript Show n’ Tells before (one here and one there), but this one’s a little special, because this time there’ll be a boatload of international visitors in Brighton for the legendary Full Frontal conference.

Skiff, 6 Gloucester Street, BN1 4AB, Brighton

19:30 - 22:00 3 October 2010
Posted: 9 Nov 2010
draggable event

Pub Standards - Jan 2011

The infamous beer-infused, casual, social, warm, raucous, fine, dandy, monthly London meet-up for web folk. The history of Pub Standards is shrouded in mystery, mythology, folklore, and alcohol-induced amnesia but some say that it was founded in 2005 by a merry band of web pranksters

The Bricklayer’s Arms, Gresse Street, London W1

Thursday 13th January 18:30 - Till closing
Posted: 12 Jan 2011

Creating a draggable event

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

1. Marking up HTML events with hCalendar

Although marking up events with hCalendar 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 hCalendar.  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 event" 
  title="draggable event" 
  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 events marked-up with hCalendar into draggables. Once you have added the file to the header of your page you need to add the events 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 events. 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': 'hCalendar01',
      'formats': 'hCalendar'
   });

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

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