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.
Crepes on Cole is awesomeReviewer: 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
The Bricklayer's ArmsReviewer: 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
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
<img id="dragImage1" class="drag-icon" alt="draggable review" title="draggable review" src="draggables/cube.png" />
3. Adding the code
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.
Properties of the addDragItem configuration object
- The img tag id for the drag icon. Takes a single value.
- 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.
- The id for the HTML tag containing the microformats. This can be a single or multiple value.
- 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