javascript - Greasemonkey 脚本，可在每个网站上创建 Kineticjs 拖放 Canvas

Question

我想在我在 Firefox 中访问的每个网站上放置一个拖放 Canvas 。我的 Greasemonkey 脚本在每个页面下放置了一个拖放 Canvas :

kinetic.user.js:

// ==UserScript==
// @name          kineticjs_example

// @description   Canvas Drag and Drop
// @include       *
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// @require       http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js

// ==/UserScript==


var div = document.createElement( 'div' );
with( div ) {
    setAttribute( 'id', 'container' );


}

// append at end
document.getElementsByTagName( 'body' )[ 0 ].appendChild( div );





var stage = new Kinetic.Stage({
    container: 'container',
    width: 1000,
    height: 1000
});
var layer = new Kinetic.Layer();
var rectX = stage.getWidth() / 2 - 50;
var rectY = stage.getHeight() / 2 - 25;

var box = new Kinetic.Rect({
    x: rectX,
    y: rectY,
    width: 100,
    height: 50,
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true
});

// add cursor styling
box.on('mouseover', function() {
    document.body.style.cursor = 'pointer';
});
box.on('mouseout', function() {
    document.body.style.cursor = 'default';
});


 layer.add(box);
    stage.add(layer);

如何将这个形状拖放到整个网站上？

Answer 1

不要追加到末尾，而是在开头插入您的容器，以便它成为第一个子元素。还记得改改改css position property到“绝对”。

var div = document.createElement( 'div' );
// important for overlay
div.style.position = 'absolute';
// change z ordering
div.style.zindex = '1000' // assuming no other elements is using a zindex as big as this
with( div ) {
    setAttribute( 'id', 'container' );
}

// insert at the beginning
var parent = document.getElementsByTagName( 'body' )[ 0 ];
parent.insertBefore(div,parent.firstChild);

另一种解决方案(仅使用 CSS 属性)

var div = document.createElement( 'div' );
// important for overlay
div.style.position = 'absolute';
div.style.top = '0';
div.style.left = '0';
// change z ordering
div.style.zindex = '1000' // assuming no other elements is using a zindex as big as this
with( div ) {
    setAttribute( 'id', 'container' );
}

// append at end
document.getElementsByTagName( 'body' )[ 0 ].appendChild( div );

在这种情况下，元素附加到末尾，然后使用 css position 属性将其放置在页面的 (0,0) 位置

该特定站点似乎使用了 css property zindex改变元素的 z 顺序