OpenSeadragon with IIIF Drag and Drop Demo

It isn't clear that there is a use case for drag and drop into a simple single-image viewer, but it is useful to demonstrate the functionality.

Intended behavior

The OpenSeadragon viewer above is wrapped within a <div id="container"> that serves as a dropzone in which IIIF drag and drop works. This demo is designed to provide some support for all three drop patterns described in IIIF Drag-and-drop. Accepts manifest (first image from first canvas displayed, parsing is dumb and perhaps only works with manifests from e-codices..), manifest with canvas specified (first image from specified canvas displayed, parsing dumb), or an image info URI.

Demo

• Open up http://zimeon.github.io/iiif-dragndrop/sourcetest.html in a new window.
• Drag (click, hold, drag) one of the IIIF icons over the OpenSeadragon viewer and drop (release). Image will change and notes of the process will show in the log window.
• Behaviours for the three cases:
  1. Manifest (with no canvas specified) - viewer will display the first image on the first canvas. This isn't likely to be very useful but there isn't much option to do more with a image-only (Presentation API unaware) viewer.
  2. Manifest with canvas selected - viewer will display the first image on the selected canvas. In the most common case there is just one image on a canvas so the bahaviour will be as expected. However, this situation will not handle well the case of a canvas with multiple images.
  3. Image - viewer will display the image. Behavious here is clear.
• Paste of a URI into OpenSeadragon also works, the JavaScript wrapper attempts to read JSON from the URI and determines whether it is an image info.json (in which case the image is displayed), or a manifest (in which case the first image on the first canvas is displayed).