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改變元素