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

Question

我想在我访问的每个网站上放置一个拖放画布。 我的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 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位置属性用于将其放置在（0,0）位置

特定网站似乎是使用css property zindex改变元素