0599 Drag and Drop

_includes/links.md

@@ -84,6 +84,7 @@
 
 [0560]: {{ site.cookbook_url | absolute_url }}/recipe/0560-resources-on-a-timeline/ "Rendering Resources Sequentially on a Timeline"
 [0561]: {{ site.cookbook_url | absolute_url }}/recipe/0561-text-on-image/ "Visible Text Resource on a Canvas"
+[0599]: {{ site.cookbook_url | absolute_url }}/recipe/0599-drag-and-drop/ "Drag and Drop"
 
 [cookbook-process]: {{site.cookbook_url | absolute_url }}/recipe
 

index.md

@@ -148,7 +148,7 @@ Recipes using [Content State API](https://iiif.io/api/content-state/1.0/)
 * [Loading a manifest with a viewer using a link][0466]
 * [Open a specific region of a canvas in a viewer][0485]
 * [Sharing a link for opening two or more Canvases][0540]
-
+* [Drag and drop][0599]
 
 
 ## Technical

recipe/0599-drag-and-drop/index.md

@@ -0,0 +1,53 @@
+---
+title: Name of Recipe
+id: -1
+layout: recipe
+tags: [tbc]
+summary: "tbc"
+viewers:
+topic:
+ - basic
+---
+
+## Use Case
+
+As a person wanting to annotate a IIIF resource, you would like to open a manifest in a viewer not present or available in the web interface where you first find the resource.
+
+## Implementation Notes
+
+Implementing this recipe requires a resource provider and a viewer provider each to implement their part. The resource provider must have a draggable item that can have a `dataTransfer.setData` method attached to the item's `dragstart` event and the viewer provider must have an interface capable of handling the data in its `drop` event.
+
+## Restrictions
+
+Because implementation is two-part, you may only have control over one half of the ability to drag and drop. Consequently, and since this action is only in a GUI environment, you will need to consider whether visitors to your IIIF interface would benefit from some kind of support text.
+
+## Example
+
+Describe the solution in prose and provide an example.
+The example json document must be an external document, and imported with the following:
+
+{% include manifest_links.html viewers="" manifest="manifest.json" %}
+
+<img src="https://iiif.io/api/cookbook/assets/images/logos/logo-sm.png" draggable="true" ondragstart="drag(event)" alt="IIIF logo; drag and drop onto a supporting viewer to see this resource in that viewer">
+
+<script>
+   function drag(ev) {
+            ev.dataTransfer.setData("text/plain", JSON.stringify({
+                 "@context": "http://iiif.io/api/presentation/3/context.json",
+                 "id": "https://example.org/content-states/1",
+                 "type": "Annotation",
+                 "motivation": ["contentState"],
+                 "target": {
+                    "id": "https://iiif.io/api/cookbook/recipe/0006-text-language/manifest.json",
+                    "type": "Manifest"
+                }
+      }));
+   }
+</script>
+
+## Related Recipes
+
+Provide a bulleted list of related recipes and why they are relevant.
+
+{% include acronyms.md %}
+{% include links.md %}

recipe/0599-drag-and-drop/manifest.json

@@ -0,0 +1,54 @@
+{
+    "@context": "http://iiif.io/api/presentation/3/context.json",
+    "id": "{{ id.url }}",
+    "type": "Manifest",
+    "label": { "en": [ "Visible Text Annotation" ] },
+    "items": [
+      {
+        "id": "{{ id.path }}/canvas",
+        "type": "Canvas",
+        "height": 31722,
+        "width": 70399,
+        "items": [
+          {
+            "id": "{{ id.path }}/page/p1/1",
+            "type": "AnnotationPage",
+            "items": [
+              {
+                "id": "{{ id.path }}/annotation/p0001-image",
+              "type": "Annotation",
+              "motivation": "painting",
+              "body": {
+                "id": "https://iiif.io/api/image/3.0/example/reference/36ca0a3370db128ec984b33d71a1543d-100320001004/full/max/0/default.jpg",
+                "type": "Image",
+                "format": "image/jpeg",
+                "height": 31722,
+                "width": 70399,
+                "service": [
+                  {
+                    "id": "https://iiif.io/api/image/3.0/example/reference/36ca0a3370db128ec984b33d71a1543d-100320001004",
+                    "profile": "level1",
+                    "type": "ImageService3"
+                  }
+                ]
+              },
+                "target": "{{ id.path }}/canvas"
+              },
+              {
+                "id": "{{ id.path }}/annotation/p0001-text",
+                "type": "Annotation",
+                "motivation": "painting",
+                "body": {
+				  "type": "TextualBody",
+				  "format": "text/html",
+				  "value": "<p style='font-size:1000px; background-color: rgba(16, 16, 16, 0.5); padding:300px'>The koto is to the right, carried in a cloth wrapping.</p>",
+				  "language": "en"
+                },
+                "target": "{{ id.path }}/canvas#xywh=5500,12200,8000,5000"
+              }
+            ]
+          }
+        ]
+      }    
+    ]
+  }