Greasemonkey脚本，可在每个网站上创建Kineticjs拖放画布

Question

我想在Firefox中访问的每个网站上都放一个拖放画布。 我的Greasemonkey脚本在每个页面下放置一个拖放画布：

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属性更改为'absolute'。

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属性zindex更改元素的z顺序