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.

Useful microformat resources

• Brain Suda's microformats cheat sheet (PDF) - great for understanding the structures of microformats
• ufJSON microformats.org - JSON serialization standard for microformats
• Emily Lewis's book Microformats made simple provides a good in-depth reference

• hAtom microformats.org - used to mark-up articles
• hCard microformats.org - used to mark-up contact information
• hCalandar microformats.org - used to mark-up event information
• XFN microformats.org - used to mark-up relationships between people
• hResume microformats.org - used to mark-up resumes
• hReviews microformats.org - used to mark-up reviews

Follow my twitter account for updates: @glennjones