Dragging widgets (Undecorated XUL windows)

Posted July 30th, 2007 by 20after4
Tags:

The following is a simple bit of code that can make a borderless window dragable, currently tested only on Linux. While this may not be needed in most X Windows Managers (due to alt-click dragability) it's still an important part of any desktop widget runtime. In WidgetRunner you can simply include this JavaScript file to provide the functionality automatically. 
/* widget.js - shared code used in all widgets.
*/

window.addEventListener("load", startup, false);
var widgetRunner= window.opener.widgetRinner;

function startup() {
	
	window.opener.widgetLoaded(window);
	if (loadWidget) {
		loadWidget();
	}


	var startPos=0;
	var mouseDown = function(event) {
		startPos = [ event.clientX, event.clientY];

	}
	
	var mouseMove = function(event) {
		if (startPos != 0) {
			var newX = event.screenX-startPos[0];
			var newY = event.screenY-startPos[1];
			window.moveTo(newX,newY);
		}
	}
	
	var mouseUp = function(event) {
		startPos=0;
	}

	window.addEventListener("mousedown",mouseDown, false);
	window.addEventListener("mouseup",mouseUp, false);
	window.addEventListener("mousemove",mouseMove, false);
}
I have published a stripped down version of this code as an example on the Mozilla Developer Connection wiki. That document is here: Code_snippets:Windows#Draggable_windows
Related Project:
WidgetRunner