mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 18:17:20 +00:00
Code Issues Releases Wiki Activity

Fix problem with stray drag image showing

Browse Source 
Changes to the main layout CSS a few weeks ago meant that the drag
image element was visible at the top left corner of the window.
Astoundingly, the fix is to cover it with another div with the same
background colour as the page….
This commit is contained in:
Jeremy Ruston 2013-08-08 21:46:38 +01:00
parent ad4750d062
commit 7e82eb13eb
2 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -130,15 +130,27 @@ LinkWidget.prototype.handleDragStartEvent = function(event) {
if(this.to) { if(this.to) {
// Set the dragging class on the element being dragged // Set the dragging class on the element being dragged
$tw.utils.addClass(event.target,"tw-tiddlylink-dragging"); $tw.utils.addClass(event.target,"tw-tiddlylink-dragging");
// Create the drag image element // Create the drag image elements
this.dragImage = this.renderer.renderTree.document.createElement("div"); this.dragImage = this.renderer.renderTree.document.createElement("div");
this.dragImage.className = "tw-tiddler-dragger"; this.dragImage.className = "tw-tiddler-dragger";
this.dragImage.appendChild(this.renderer.renderTree.document.createTextNode(this.to)); var inner = this.renderer.renderTree.document.createElement("div");
inner.className = "tw-tiddler-dragger-inner";
inner.appendChild(this.renderer.renderTree.document.createTextNode(this.to));
this.dragImage.appendChild(inner);
this.renderer.renderTree.document.body.appendChild(this.dragImage); this.renderer.renderTree.document.body.appendChild(this.dragImage);
// Astoundingly, we need to cover the dragger up: http://www.kryogenix.org/code/browser/custom-drag-image.html
var bounds = this.dragImage.firstChild.getBoundingClientRect(),
cover = this.renderer.renderTree.document.createElement("div");
cover.className = "tw-tiddler-dragger-cover";
cover.style.left = (bounds.left - 8) + "px";
cover.style.top = (bounds.top - 8) + "px";
cover.style.width = (bounds.width + 16) + "px";
cover.style.height = (bounds.height + 16) + "px";
this.dragImage.appendChild(cover);
// Set the data transfer properties // Set the data transfer properties
var dataTransfer = event.dataTransfer; var dataTransfer = event.dataTransfer;
dataTransfer.effectAllowed = "copy"; dataTransfer.effectAllowed = "copy";
dataTransfer.setDragImage(this.dragImage,-16,-16); dataTransfer.setDragImage(this.dragImage.firstChild,-16,-16);
dataTransfer.clearData(); dataTransfer.clearData();
dataTransfer.setData("text/vnd.tiddler",this.renderer.renderTree.wiki.getTiddlerAsJson(this.to)); dataTransfer.setData("text/vnd.tiddler",this.renderer.renderTree.wiki.getTiddlerAsJson(this.to));
dataTransfer.setData("text/plain",this.renderer.renderTree.wiki.getTiddlerText(this.to,"")); dataTransfer.setData("text/plain",this.renderer.renderTree.wiki.getTiddlerText(this.to,""));

11
themes/tiddlywiki/snowwhite/base.tid
View File

@ -164,6 +164,12 @@ a.tw-tiddlylink-external {
*/ */
.tw-tiddler-dragger { .tw-tiddler-dragger {
position: relative;
z-index: -10000;
}
.tw-tiddler-dragger-inner {
position: absolute;
display: inline-block; display: inline-block;
padding: 8px 20px; padding: 8px 20px;
font-size: 16.9px; font-size: 16.9px;
@ -177,6 +183,11 @@ a.tw-tiddlylink-external {
<<border-radius 20px>> <<border-radius 20px>>
} }
.tw-tiddler-dragger-cover {
position: absolute;
background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##pagebackground}};
}
.tw-import { .tw-import {
position: relative; position: relative;
} }