This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/dev/

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">
<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>