diff --git a/drag-and-drop-interop.html b/drag-and-drop-interop.html
new file mode 100644
index 000000000..ecd7aba12
--- /dev/null
+++ b/drag-and-drop-interop.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Drag and Drop Interoperability with TiddlyWiki Demo</title>
+    <style>
+        #draggable {
+            padding: 1em;
+            margin: 1em;
+            background: #ecc;
+        }
+    </style>
+</head>
+<body>
+    <div id="draggable" draggable="true">
+        Drag me to a TiddlyWiki window
+    </div>
+</body>
+<script>
+
+    var titleString = "This is the string that appears when the block is dragged to a text input";
+    var tiddlerData = [
+        {title: "Tiddler One", text: "This is one of the payload tiddlers"},
+        {title: "Tiddler Two", text: "This is another of the payload tiddlers", "custom-field": "A custom field value"}
+    ];
+
+    document.getElementById("draggable").addEventListener("dragstart",function(event) {
+        event.dataTransfer.setData("URL","data:text/vnd.tiddler," + encodeURIComponent(JSON.stringify(tiddlerData)));
+        event.dataTransfer.setData("Text",titleString);
+        event.stopPropagation();
+        return false;
+    });
+    
+</script>
+</html>
\ No newline at end of file
diff --git a/editions/dev/tiddlers/HelloThere.tid b/editions/dev/tiddlers/HelloThere.tid
index 8afc1b22c..021e0ad47 100644
--- a/editions/dev/tiddlers/HelloThere.tid
+++ b/editions/dev/tiddlers/HelloThere.tid
@@ -13,6 +13,7 @@ Welcome to the developer documentation for TiddlyWiki (https://tiddlywiki.com/).
 ** HookMechanism
 ** [[Using ES2016 for Writing Plugins]]
 ** [[Adding Babel Polyfill to TiddlyWiki]]
+** [[TiddlyWiki Drag and Drop Interoperability]]
 * The original developer documentation from https://tiddlywiki.com:
 ** [[TiddlyWiki for Developers]]
 ** [[TiddlyWiki Coding Style Guidelines]]
diff --git a/editions/dev/tiddlers/new/TiddlyWiki Drag and Drop Interop.tid b/editions/dev/tiddlers/new/TiddlyWiki Drag and Drop Interop.tid
new file mode 100644
index 000000000..6808de4dd
--- /dev/null
+++ b/editions/dev/tiddlers/new/TiddlyWiki Drag and Drop Interop.tid	
@@ -0,0 +1,15 @@
+title: TiddlyWiki Drag and Drop Interoperability
+
+It is straightforward to allow any HTML file to interoperate with TiddlyWiki's drag and drop implementation.
+
+This example shows how to attach draggable data to a DOM element. The data is provided in two different forms:
+
+* the string data is used if the element is dragged onto a text editing area
+* the tiddler data is used if the element is dragged into TiddlyWiki's import area
+
+<$button>
+<$action-sendmessage $message="tm-download-file" $param="$:/dev/save/dragndropinterop" filename="index.html"/>
+Download this sample code
+</$button>
+
+<$codeblock code={{DragAndDropInterop}} language="text/html"/>
diff --git a/editions/dev/tiddlers/new/dragndropinterop.html b/editions/dev/tiddlers/new/dragndropinterop.html
new file mode 100644
index 000000000..ecd7aba12
--- /dev/null
+++ b/editions/dev/tiddlers/new/dragndropinterop.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Drag and Drop Interoperability with TiddlyWiki Demo</title>
+    <style>
+        #draggable {
+            padding: 1em;
+            margin: 1em;
+            background: #ecc;
+        }
+    </style>
+</head>
+<body>
+    <div id="draggable" draggable="true">
+        Drag me to a TiddlyWiki window
+    </div>
+</body>
+<script>
+
+    var titleString = "This is the string that appears when the block is dragged to a text input";
+    var tiddlerData = [
+        {title: "Tiddler One", text: "This is one of the payload tiddlers"},
+        {title: "Tiddler Two", text: "This is another of the payload tiddlers", "custom-field": "A custom field value"}
+    ];
+
+    document.getElementById("draggable").addEventListener("dragstart",function(event) {
+        event.dataTransfer.setData("URL","data:text/vnd.tiddler," + encodeURIComponent(JSON.stringify(tiddlerData)));
+        event.dataTransfer.setData("Text",titleString);
+        event.stopPropagation();
+        return false;
+    });
+    
+</script>
+</html>
\ No newline at end of file
diff --git a/editions/dev/tiddlers/new/dragndropinterop.html.meta b/editions/dev/tiddlers/new/dragndropinterop.html.meta
new file mode 100644
index 000000000..d4adb96b9
--- /dev/null
+++ b/editions/dev/tiddlers/new/dragndropinterop.html.meta
@@ -0,0 +1,3 @@
+title: DragAndDropInterop
+type: text/html
+
diff --git a/editions/dev/tiddlers/new/save-dragndropinterop.tid b/editions/dev/tiddlers/new/save-dragndropinterop.tid
new file mode 100644
index 000000000..3e9eab89f
--- /dev/null
+++ b/editions/dev/tiddlers/new/save-dragndropinterop.tid
@@ -0,0 +1,3 @@
+title: $:/dev/save/dragndropinterop
+
+<$view tiddler="DragAndDropInterop" field="text"/>
