create html ruler using browser console

console-ruler.js

function createRuler(options) {

	function loadScript(callback) {

		var elId = 'draggabilly-script';
		if (global.draggabillyScriptIsLoaded){
			callback();
			return;
		}

		var draggabillyScript = document.createElement('script');
		// http://draggabilly.desandro.com/
		draggabillyScript.src = 'https://npmcdn.com/draggabilly@2.1/dist/draggabilly.pkgd.js';
		document.body.appendChild(draggabillyScript);
		draggabillyScript.onload = function () {
			eval(draggabillyScript.innerHTML);
			global.draggabillyScriptIsLoaded = true;
			callback();
		}
	}

	loadScript(function () {
	
		options = options || {};
		options.length = options.length || '300px';
		options.thickness = options.thickness || '2px';

		var rulerDiv = document.createElement('div');
		rulerDiv.id = options.id;
		rulerDiv.style.width = options.isVertical ? options.thickness : options.length;
		rulerDiv.style.height = options.isVertical ? options.length : options.thickness;
		rulerDiv.style.backgroundColor = options.color || '#FF0000';
		rulerDiv.style.position = 'absolute';
		rulerDiv.style.top = options.top || '10px';
		rulerDiv.style.left = options.left || '10px';
		rulerDiv.style.cursor = 'move';
		rulerDiv.style.zIndex = 9999999;

		document.body.appendChild(rulerDiv);

		var draggie = new Draggabilly('#' + options.id);
	});
}

createRuler({id: 'elm1', color: 'red', top: '108px', left: '900px'});
createRuler({id: 'elm2', color: 'green', top: '185px', left: '900px'});
createRuler({id: 'elm3', color: 'yellow', top: '255px', left: '900px'});
createRuler({id: 'elm4', color: 'blue', isVertical: true, top: '50px', left: '973px'});
createRuler({id: 'elm5', color: 'black', isVertical: true, top: '50px', left: '1060px'});
createRuler({id: 'elm6', color: 'orange', isVertical: true, top: '50px', left: '1147px'});