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 { <> } +.tw-tiddler-dragger-cover { + position: absolute; + background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##pagebackground}}; +} + .tw-import { position: relative; }