Draggables

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

onDataDrop

Draggables provides a onDataDrop event which is called when the user drops a draggable onto a drop zone. You set onDataDrop within the JSON configuration object of the addDropItem method. Just add the name of the function you wish to be called to this property. When the event fires the function is passed a JSON object containing the data.

Example use of onDataDrop

draggables.addDropItem({
   'dropZone': 'dropDiv',
   'formats': ['hCalendar'],
   'onDataDrop': 'proccessData'
});

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

Data structure

The data structure will be different dependant on which microformats you have allowed the drop area to accept. The easiest way to work with different data structures is to build a  drop page that displays the JSON structure in an alert or console log. The beautify.js script makes it much easier to read the JSON object.

<script src="beautify.js"></script>
<script src="draggables-drop.min.js"></script>
                
draggables.addDropItem({
    'dropZone': 'dropDiv',
    'formats': ['hCard', 'hCalendar', 'hReview',, 'hResume', 'XFN'],
    'onDataDrop': 'proccessData'
});

function proccessData(json) {
    alert(js_beautify(JSON.stringify(json)));
};

Please note: microformat structures can contain differing levels of information. You need to test your code as thoroughly as possible. The microformats test suite can provide a useful resource to test your custom code with lots of different patterns.

Naming of microformats

For historical and technical reasons the naming conventions for microformts can be a little confusing. The return data in the JSON object often has a different name to the one we use elsewhere. The JSON name is actually based on the class name used in HTML mark-up. The table below shows the relationship between the naming schemes. The case of the letter is important.

  Microformts name Returned name JSON
Article hEntry (Part of hAtom) hentry
Contact hCard vcard
Event hCalendar vevent
Friends hCard vcard
  XFN xfn
Resume hResume hresume
Review hReview hreview

Useful microformat resources