0599 Drag and Drop

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

@@ -0,0 +1,60 @@
+---
+title: Name of Recipe
+id: -1
+layout: recipe
+tags: [tbc]
+summary: "tbc"
+viewers:
+topic:
+ - basic
+---
+
+## Use Case
+
+Describe the use case that the pattern is intended to solve.
+Why is this pattern important?
+
+## Implementation Notes
+
+What do you need to know to use this pattern?
+How do you implement the pattern?
+
+## Restrictions
+
+When is this pattern is usable / not usable? Is it deprecated? If it uses multiple specifications, which versions are needed, etc.?
+
+Delete this section if it is not needed.
+If you don't know what the restrictions might be initially, just leave the following line:
+**Unknown - Help Needed**
+
+## 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", {
+                 "@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"
+              }
+            ]
+          }
+        ]
+      }    
+    ]
+  }