Review Draggables

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

5 out of 5 stars

Crepes on Cole is awesome

Reviewer: Tantek - April 18, 2005

Crepes on Cole is one of the best little creperies in San Francisco. Excellent food and service. Plenty of tables in a variety of sizes for parties large and small. Window seating makes for excellent people watching to/from the N-Judah which stops right outside. I've had many fun social gatherings here, as well as gotten plenty of work done thanks to neighborhood WiFi.

Visit date: April 2005

Food eaten: Florentine crepe

5 out of 5 stars

The Bricklayer's Arms

Reviewer: Glenn Jones - 14 January, 2011

The Bricklayer's Arms is in the centre of Soho not too far from the restaurants of Charlotte Street. The price of the beer makes it a great place for a meet-up and Sam Smith's do a good pint of bitter. Can be a little busy on the middle Thursday of each month as Pub Standards take over the upstairs bar. The Bricklayer's Arms is one of London's better pubs.

Visit date: Jan 2011

Creating a draggable review

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

1. Marking up HTML reviews with hReview

Although marking up reviews with hReview 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 hReview. 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 review" 
  title="draggable review" 
  src="draggables/cube.png" 
/>

3. Adding the code

There are two JavaScript files (draggables-drag.min.js and microformats-hreviewdefinition.min.js) you must include in the page to turn your reviews marked up with hReviews into draggables. Once you have added the files to the header of your page you need to add the reviews into draggables by using the addDragItem method. This method takes a simple JSON configuration object with a number of properties which are explained below.

<script type="text/javascript" src="draggables/draggables-drag.min.js"></script>
<script src="draggables/microformats-hreviewdefinition.min.js"></script>

<script>

   draggables.addDragItem({
      'dragIcon': 'dragImage1',
      'dragIconSrc': ['draggables/cube.png', 'draggables/cube-selected.png'],
      'dataElements': 'hReview01',
      'formats': 'hReview'
   });

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

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

Follow my twitter account for updates: @glennjones