kopia lustrzana https://github.com/miklobit/TiddlyWiki5
Fix problem with stray drag image showing
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….print-window-tiddler
rodzic
ad4750d062
commit
7e82eb13eb
|
@ -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,""));
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue