Draggables

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

Using Code

Using draggables is relatively easy. The code is broken into two main files draggables-drag.min.js and draggables-drop.min.js. to match the two different parts of the drag and drop operation. These two files already contain the definitions for contacts, friends and events, if you wish to use draggables for reviews, resumes or articles you will need to load an additional definition file.

Adding a drag item

Creating a drag item is a three-step process. First mark-up the HTML containing the data with an appropriate mircoformat then add the draggables icon to the page then finally add the JavaScript code.

There is a single JavaScript file draggables-drag.min.js you must include in the page. There may also be an additional definition file depending on what type of data you wish to drag. Once you have added the file to the header of your page you need to create the draggables by using the addDragItem method. This method takes a simple JSON configuration object with a number of properties.

The example below shows the creation of a draggable contact.

<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'
   });

</script>

Detailed desciptions of how to create a draggable item for Articles, Contacts, Events, Friends, Resumes, and Reviews can be found at the bottom of each demo page.

Adding a drop zone

Creating a draggables drop zone is a two-step process. First add the HTML mark-up for the drop zone and then add the draggables JavaScript.

There is a single JavaScript file draggables-drop.min.js you must include in the page. There may also be an additional definition file depending on what type of data you wish to collect. Once you have added the file to the header of your page you need to create the draggables by using the addDropItem method. This method takes a simple JSON configuration object with a number of properties.

The example below shows the creation of a drop zone for an event.

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

draggables.addDropItem({
   'dropZone': 'dropDiv',
   'formats': ['hCalendar'],
   'mappings': [
      ['summary', 'vevent[0].summary'],
      ['description', 'vevent[0].description'],
      ['location', 'vevent[0].location'],
      ['url', 'vevent[0].url'],
      ['dtstart', 'vevent[0].dtstart'],
      ['dtend', 'vevent[0].dtend'],
      ['created', 'vevent[0].dtstamp']
   ],
   'onDataDrop': 'proccessData',
   'preLoadImages': ['draggables/box-selected.png']
});

function proccessData(json) {
    // Add javascript to work directly with the json data
};

Detailed descriptions of how to create a draggable item for Articles, Contacts, Events, Friends, Resumes, and Reviews can be found at the bottom of each demo page. There are also two pages which describe how the data can be used to up-date a page through mapping values or can be passed into your code using the onDataDrop

Files

Darggables is broken into a number of components so that you only need to load the elements required.

draggables-drag.min.js
The code required to create a draggable item. Supports: contacts, friends and events without an additional definition file.
draggables-drop.min.js
The code required to create a drop zone. Supports: contacts, friends and events without an additional definition file.
microformats-hresumedefinition.min.js
Containing the definition for parsing resumes using the hResume microformat.
microformats-hreviewdefinition.min.js
Containing the definition for parsing reviews using the hReview microformat.
microformats-hatomdefinition.min.js
Containing the definition for parsing articles using the hAtom microformat.
draggables.css
Example CSS for draggables
box.png, box-selected.png, cube.png and cube-selected.png
Images for draggables