This page is part of a static HTML representation of the TiddlyWiki at

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

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <title>Drag and Drop Interoperability with TiddlyWiki Demo</title>
        #draggable {
            padding: 1em;
            margin: 1em;
            background: #ecc;
    <div id="draggable" draggable="true">
        Drag me to a TiddlyWiki window
    <button id="copy">
        Click to copy two tiddlers to the clipboard


    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)));
        return false;

    document.getElementById("copy").addEventListener("click",function(event) {

    function listener(event) {
        event.clipboardData.setData("URL","data:text/vnd.tiddler," + encodeURIComponent(JSON.stringify(tiddlerData)));