From 7e82eb13ebb64d045178331093a9df900ebd7004 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Thu, 8 Aug 2013 21:46:38 +0100
Subject: [PATCH] Fix problem with stray drag image showing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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….
---
 core/modules/widgets/link.js         | 18 +++++++++++++++---
 themes/tiddlywiki/snowwhite/base.tid | 11 +++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/core/modules/widgets/link.js b/core/modules/widgets/link.js
index a59d33895..0fa3f3998 100644
--- a/core/modules/widgets/link.js
+++ b/core/modules/widgets/link.js
@@ -130,15 +130,27 @@ 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
+		// Create the drag image elements
 		this.dragImage = this.renderer.renderTree.document.createElement("div");
 		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);
+		// 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
 		var dataTransfer = event.dataTransfer;
 		dataTransfer.effectAllowed = "copy";
-		dataTransfer.setDragImage(this.dragImage,-16,-16);
+		dataTransfer.setDragImage(this.dragImage.firstChild,-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,""));
diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid
index 63bce66a6..2ae39a27b 100644
--- a/themes/tiddlywiki/snowwhite/base.tid
+++ b/themes/tiddlywiki/snowwhite/base.tid
@@ -164,6 +164,12 @@ a.tw-tiddlylink-external {
 */
 
 .tw-tiddler-dragger {
+	position: relative;
+	z-index: -10000;
+}
+
+.tw-tiddler-dragger-inner {
+	position: absolute;
 	display: inline-block;
 	padding: 8px 20px;
 	font-size: 16.9px;
@@ -177,6 +183,11 @@ a.tw-tiddlylink-external {
 	<<border-radius 20px>>
 }
 
+.tw-tiddler-dragger-cover {
+	position: absolute;
+	background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##pagebackground}};
+}
+
 .tw-import {
 	position: relative;
 }