clone/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/TiddlyWiki/TiddlyWiki5.git synced 2026-05-05 18:56:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added basic support for drag and drop of tiddlers

Browse Source 
Links are now draggable. Dragging outside the browser will drop the
wiki text of the tiddler. Dragging to another TW5 browser window will
drop the entire tiddler, including fields.
This commit is contained in:
Jeremy Ruston
2013-04-08 18:47:46 +01:00
parent df59269b0d
commit e39d246317
6 changed files with 174 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
core/modules/widgets/link.js
View File

@@ -56,7 +56,11 @@ LinkWidget.prototype.generate = function() {
}
}
}
var events = [{name: "click", handlerObject: this, handlerMethod: "handleClickEvent"}];
var events = [
{name: "click", handlerObject: this, handlerMethod: "handleClickEvent"},
{name: "dragstart", handlerObject: this, handlerMethod: "handleDragStartEvent"},
{name: "dragend", handlerObject: this, handlerMethod: "handleDragEndEvent"}
];
if(this.hover) {
events.push({name: "mouseover", handlerObject: this, handlerMethod: "handleMouseOverOrOutEvent"});
events.push({name: "mouseout", handlerObject: this, handlerMethod: "handleMouseOverOrOutEvent"});
@@ -79,11 +83,11 @@ LinkWidget.prototype.generate = function() {
wikiLinkText = wikiLinkText.replace("$uri_doubleencoded$",encodeURIComponent(encodeURIComponent(this.to)));
this.attributes.href = wikiLinkText;
}
this.events = events;
} else {
this.tag = "span";
}
this.children = this.renderer.renderTree.createRenderers(this.renderer.renderContext,this.renderer.parseTreeNode.children);
this.events = events;
};
LinkWidget.prototype.handleClickEvent = function(event) {
@@ -113,6 +117,44 @@ LinkWidget.prototype.handleMouseOverOrOutEvent = function(event) {
return false;
};
LinkWidget.prototype.handleDragStartEvent = function(event) {
if(this.to) {
// Set the dragging class on the element being dragged
$tw.utils.addClass(event.target,"tw-tiddlylink-dragging");
// Create the drag image element
this.dragImage = document.createElement("div");
this.dragImage.className = "tw-tiddler-dragger";
this.dragImage.appendChild(document.createTextNode(this.to));
document.body.appendChild(this.dragImage);
// Set the data transfer properties
var dataTransfer = event.dataTransfer;
dataTransfer.effectAllowed = "copy";
dataTransfer.setDragImage(this.dragImage,-16,-16);
dataTransfer.clearData();
dataTransfer.setData("text/vnd.tiddler",this.renderer.renderTree.wiki.getTiddlerAsJson(this.to));
dataTransfer.setData("text/plain",this.renderer.renderTree.wiki.getTiddlerText(this.to,""));
event.stopPropagation();
} else {
event.preventDefault();
}
};
LinkWidget.prototype.handleDragEndEvent = function(event) {
// Remove the dragging class on the element being dragged
$tw.utils.removeClass(event.target,"tw-tiddlylink-dragging");
// Delete the drag image element
if(this.dragImage) {
this.dragImage.parentNode.removeChild(this.dragImage);
}
};
LinkWidget.prototype.postRenderInDom = function() {
// Add the draggable attribute to links (we don't include it in the static HTML representation)
if(this.renderer.domNode.tagName === "A") {
this.renderer.domNode.setAttribute("draggable",true);
}
};
LinkWidget.prototype.refreshInDom = function(changedAttributes,changedTiddlers) {
// Set the class for missing tiddlers
if(this.targetTitle && changedTiddlers[this.targetTitle]) {