Significant edits to flesh out the text 📝

Author: triplingual

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

@@ -13,36 +13,64 @@ topic:
 
 As a person wanting to annotate a IIIF resource, you would like to open a manifest in a viewer not available in the web interface where you first find the resource.
 
+Alternately, as a viewer developer, you would like to allow your viewer to accept manifests from dragged-over items.
+
 ## 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.
+Implementing this recipe requires a resource provider and a viewer each to implement their part. 
+
+### For Resource Providers
+
+The resource provider must have a draggable item — such as an image — that makes use of the DataTransfer object. It will have a [`dataTransfer.setData` method](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) attached to the item's `dragstart` event.
+
+### For Viewer Developers
+
+A supporting viewer must have an interface capable of handling the DataTransfer object's data carried by the draggable item 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.
 
+Viewer developers will have a special need to consider security when implementing a droppable interface.
+
 ## Example
 
-Describe the solution in prose and provide an example.
-The example json document must be an external document, and imported with the following:
+Below are a link to this recipe's Manifest, an image of the IIIF logo decorated with the appropriate JavaScript event handler attributes, and a visible version of the script called by the image's event handlers. For a supporting viewer, the IIIF logo image below could be dragged onto its viewing area and dropped, which would result in the viewer retrieving the manifest for the IIIF Cookbook recipe titled ["Internationalization and Multi-language Values"][0006].
 
 {% 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://iiif.io/api/cookbook/recipe/0599-drag-and-drop/dnd-manifest.json",
+    "type": "Annotation",
+    "motivation": ["contentState"],
+    "target": {
+      "id": "https://iiif.io/api/cookbook/recipe/0006-text-language/manifest.json",
+      "type": "Manifest"
+    }
+  }));
+}
+</script>
+```
+
 <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"
-                }
-      }));
-   }
+function drag(ev) {
+  ev.dataTransfer.setData("text/plain", JSON.stringify({
+    "@context": "http://iiif.io/api/presentation/3/context.json",
+    "id": "https://iiif.io/api/cookbook/recipe/0599-drag-and-drop/dnd-manifest.json",
+    "type": "Annotation",
+    "motivation": ["contentState"],
+    "target": {
+      "id": "https://iiif.io/api/cookbook/recipe/0006-text-language/manifest.json",
+      "type": "Manifest"
+    }
+  }));
+}
 </script>
 
 ## Related Recipes