Greasemonkey script, that creates Kineticjs drag and drop canvas over every website
- by Michael Moeller
I'd like to put a drag and drop canvas over every website I visit in Firefox.
My Greasemonkey script puts a drag and drop canvas under every page:
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);
How can I drag and drop this shape over the entire website?
