IIIF Drag-and-drop

WARNING - Work in progress! These notes and demos are the result of work with [@aeschylus] & [@anarchivist] at the IIIF Shimathon 2015-09-29/30, UPenn.

STATUS - Although these pages have formed the basis of most drag-and-drop implementations in IIIF tools to date, these are UNOFFICIAL notes which WILL BE REPLACED WITH A FORMAL IMPORT TO VIEWERS SPECIFICATION to be developed by the IIIF Discovery Technical Specification Group. (2017-09-08)

Demo pages

Implementation status

Viewer application
M = Manifest drop
C = Manifest with Canvas
I = Image drop
Chrome Firefox Safari Notes
Mirador M & C only M & C only no Tested 2017-08-09.
Universal Viewer M, C doesn't select canvas M, C doesn't select canvas no Tested 2017-09-08.
Leaflet-IIIF no no no Tested 2017-09-08. Looks like Leaflet-IIIF isn't looking for a drop action, presumably would be easy to wrap with code to detect drop.
OpenSeadragon drop demo I only (though logs other drops) I only (though logs other drops) no Tested 2017-09-08.
Drop target test M, C, I M, C, I no Tested 2017-09-08.

Use cases

Use case "Add to viewer": User has a Mirador window open (or other IIIF multi-up viewer). In another window, the user is browsing or using a search interface, and locates an image, book, manuscript, etc. that they want to view in Mirador. The page for that object includes an IIIF icon that they drag and drop to Mirador. Mirador then adds the image/manifest to its index and displays it. The user can then repeat this at another site to add additional images, perhaps adding a set of different witnesses of a manuscript that they wish to compare. --> see #82

Use case "Add to manifest": User has an IIIF application open providing the ability to edit a collection of images/canvases (manifest). (such facilities might be added to Mirador or UniversalViewer). In another window, the user is browsing or using a search interface, and locates an image that they want to add to the collection of images they are creating. The page for that image includes an IIIF icon that they drag and drop to their application. Their application adds the image dropped in to the collection. (The image dropped in might be a single IIIF image, or it might be one image from a larger set described by a manifest in which case other metadata can be copied also). --> see #84

(The OpenSeadragon demo implements a third scenario of replacing the single image displayed with the pasted image. However, this is just for demonstration purposes, it is not clear that this corresponds with any real use case.)

HTML pattern for drag and drop

The source page for drag and drop should include the standard IIIF logo wrapped in a hyperlink. The URI of the hyperlink provides a default target in case clicked by the user, followed by a dummy query string with the manifest, canvas or image info.json URIs used to implement the draf and drop. The default target could be a help page or perhaps open a particular viewer showing the image or manifest. The query parameters are:

HTML example:

<a href="default_target?manifest=manifest_URI&canvas=canvas_URI">
  <img src="iiif-dragndrop-100px.png" alt="IIIF Drag-n-drop"/>
</a>

The dummy version of the proposed "standard IIIF drag and drop logo" used for this demo is:

IIIF Drag-n-drop