Draggables

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

Mapping

Draggables provides an easy method to map data into form fields and other HTML elements. The method addDropItem takes a JSON configuration object which has a property for defining mappings.

The mapping property is a list of mapping pairs. Each pair has two items the first is a HTML element id or a form field name. The second is a path expression referencing a specific piece of information in the dropped data.

Example of mapping event data

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

Referencing a HTML element to map data to

There are two ways to referencing a HTML element, the first is by id and second is by form filed name. Below are examples of both these methods.

Referencing a HTML element by id

The simplist way to referenec an element is by id. The example below would update the HTML element with the id 'description' in a page.

['description', 'vevent[0].description'],

Referencing a form field by form number and field name

The second type of reference is by form field name. The example below would update the form field with the name 'description' in the first form in a page.

['forms[0].description', 'vevent[0].description'],

Referencing a form field by form name and field name

You can also reference forms by their name. The example below would update the form field with the name 'description' in the form named 'eventform'.

['forms['eventform'].description', 'vevent[0].description'],

Creating JSON path expressions

Draggables has an in-built method that returns a string value from a JSON object by providing a path expression. At first this may look more complex than it actually is. A path expression is just the JavaScript code you would use to access any property in a JSON object. The code below would return the description property of the first event in the JSON object.

var description = json.vevent[0].description;

In the above example the json variable would contain the object with a structure like this:

{
   "vevent": [{
      "description": "Async has hosted JavaScript Show n’ Tells before...",
      "dtstart": "2010-11-11T19:30:00",
      "dtend": "2010-11-11T22:00:00",
      "dtstamp": "2010-11-09",
      "location": "Skiff, 6 Gloucester Street, BN1 4AB, Brighton",
      "summary": "Async - Show n Tell 3",
      "uid": "http://asyncjs.com/showntell3/",
      "url": "http://asyncjs.com/showntell3/"
   }]
}

The JSON path expression always tries to resolve to a string. If the expression is incorrect it will return an empty string. If the expression incorrectly points to an object or any array it will also return an empty string. If you write an expression that points to a number it will be returned as a string. As dates in microformats are described using ISO datetime strings the mapping function should never return a native Javascript date object.