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>
<button id="copy">
Click to copy two tiddlers to the clipboard
</button>
</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;
});
document.getElementById("copy").addEventListener("click",function(event) {
function listener(event) {
event.clipboardData.setData("URL","data:text/vnd.tiddler," + encodeURIComponent(JSON.stringify(tiddlerData)));
event.preventDefault();
}
document.addEventListener("copy",listener);
document.execCommand("copy");
document.removeEventListener("copy",listener);
});
</script>
</html>