1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-07-06 20:14:22 +00:00
TiddlyWiki5/editions/dev/tiddlers/new/dragndropinterop.html
GameDungeon e66e791944
Correct handling of pasting tiddlers (#7215)
* First Pass Implementation

* Fix Check

* Fix Style

* Update drag-drop interop example to support copy tiddlers to clipboard

---------

Co-authored-by: jeremy@jermolene.com <jeremy@jermolene.com>
2023-05-06 14:02:16 +01:00

51 lines
1.5 KiB
HTML

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