mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-27 18:40:28 +00:00
Code Issues Releases Wiki Activity

Add demo of drag and drop from a standalone HTML file

Browse Source
This commit is contained in:
jeremy@jermolene.com 2021-06-03 14:14:11 +01:00
parent 8b8f654c9c
commit c4a7ae3164
6 changed files with 92 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
drag-and-drop-interop.html Normal file
View File

@ -0,0 +1,35 @@
<!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>

1
editions/dev/tiddlers/HelloThere.tid
View File

@ -13,6 +13,7 @@ Welcome to the developer documentation for TiddlyWiki (https://tiddlywiki.com/).
** HookMechanism
** [[Using ES2016 for Writing Plugins]]
** [[Adding Babel Polyfill to TiddlyWiki]]
** [[TiddlyWiki Drag and Drop Interoperability]]
* The original developer documentation from https://tiddlywiki.com:
** [[TiddlyWiki for Developers]]
** [[TiddlyWiki Coding Style Guidelines]]

15
editions/dev/tiddlers/new/TiddlyWiki Drag and Drop Interop.tid Normal file
View File

@ -0,0 +1,15 @@
title: 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
<$button>
<$action-sendmessage $message="tm-download-file" $param="$:/dev/save/dragndropinterop" filename="index.html"/>
Download this sample code
</$button>
<$codeblock code={{DragAndDropInterop}} language="text/html"/>

35
editions/dev/tiddlers/new/dragndropinterop.html Normal file
View File

@ -0,0 +1,35 @@
<!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>

3
editions/dev/tiddlers/new/dragndropinterop.html.meta Normal file
View File

@ -0,0 +1,3 @@
title: DragAndDropInterop
type: text/html

3
editions/dev/tiddlers/new/save-dragndropinterop.tid Normal file
View File

@ -0,0 +1,3 @@
title: $:/dev/save/dragndropinterop
<$view tiddler="DragAndDropInterop" field="text"/>