Background

IIIF (International Image Interoperability Framework) icons (specifically, IIIF manifest URLs) support loading via drag & drop in many IIIF-compatible viewers.

However, I received feedback that the IIIF icons displayed by the following module did not support drag & drop.

https://github.com/omeka-j/Omeka-S-module-IiifViewers

I investigated the cause by referring to the following page, among others.

https://zimeon.github.io/iiif-dragndrop/

As a result, I found that the following HTML markup is required.

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

Not conforming to the above pattern was the cause of the drag & drop issue in the aforementioned module.

This article describes the solution.

Solution

Specifically, consider the following manifest URL as an example.

Manifest URL example: https://omekas.aws.ldas.jp/sandbox/iiif/2/2/manifest

Previously, the href attribute of the a tag only contained the IIIF manifest URL, as follows.

<a href="https://omekas.aws.ldas.jp/sandbox/iiif/2/2/manifest" title="IIIF Manifest" target="_blank">
	<img style="height: 24px" src="https://omekas.aws.ldas.jp/sandbox/files/asset/iiifviewers632bf7d736e3b.svg">
</a>

This needed to be modified as follows.

<a href="https://omekas.aws.ldas.jp/sandbox/iiif/2/2/manifest?manifest=https://omekas.aws.ldas.jp/sandbox/iiif/2/2/manifest" title="IIIF Manifest" target="_blank">
	<img style="height: 24px" src="https://omekas.aws.ldas.jp/sandbox/files/asset/iiifviewers632bf7d736e3b.svg">
</a>

The behavior when clicking the icon remains the same (downloading the manifest), but the latter version supports drag & drop to other IIIF-compatible viewers.

While writing the manifest URL twice in the href attribute is somewhat redundant, the same approach is used in Universal Viewer and IIIF Curation Viewer.

I also learned that since the ?manifest=manifest_URI part is typically used for loading, the default_target part before it often has no effect.

Therefore, I confirmed that URLs and icons for Universal Viewer and IIIF Curation Viewer, which often have URLs like the following, can also be dragged and dropped into other IIIF viewers. (I’m a bit embarrassed to admit that I previously thought the default_target part needed to be the IIIF manifest URL.)

UV: https://universalviewer.io/examples/uv/uv.html#?manifest=https://omekas.aws.ldas.jp/sandbox/iiif/2/2/manifest

ICV: http://codh.rois.ac.jp/software/iiif-curation-viewer/demo/?manifest=https://omekas.aws.ldas.jp/sandbox/iiif/2/2/manifest

Summary

I hope this helps when placing IIIF icons (IIIF manifest URLs) on your site to support drag & drop functionality.