2021-06-03 13:14:11 +00:00
|
|
|
<!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>
|
2023-05-06 13:02:16 +00:00
|
|
|
<button id="copy">
|
|
|
|
|
Click to copy two tiddlers to the clipboard
|
|
|
|
|
</button>
|
|
|
|
|
|
2021-06-03 13:14:11 +00:00
|
|
|
</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;
|
|
|
|
|
});
|
2023-05-06 13:02:16 +00:00
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
|
|
});
|
2021-06-03 13:14:11 +00:00
|
|
|
</script>
|
|
|
|
|
</html>
|
