This is somewhat obscure as most people using Titanium are using it for mobile apps, but I’ve seen just enough questions out there about this, that I thought I’d share the code that we came up with to allow users to drag a Titanium Desktop window when the background has been set to transparent and is chromeless.

This is a modification to the code found at a blog called Code Bytes. Unfortunately, I can’t credit the developer by name because nowhere on the blog does he/she actually provide a name or bio.

This was developed for version 1.1 of the Titanium framework. If you are using a later version, this may have been fixed.

/*
 * This code augments the Titanium framework code by detecting any element that has the
 * 'isDraggable' class assigned to it.  If that element is dragged, the entire window
 * is dragged correspondingly.  Also, only works on left-mouse click.
 */
var isDraggableWindow = function() {
    this.addEventListener('mousedown', function (e){
        function drag(e) {
            var currentWindow = Titanium.UI.currentWindow;
            var currentPosition = {x:currentWindow.getX(), y:currentWindow.getY()};

            currentPosition.x += e.clientX - mousePosition.x;
            currentPosition.y += e.clientY - mousePosition.y;

            currentWindow.moveTo(currentPosition.x, currentPosition.y);
        };

        if (e.button === 0 && ~e.target.className.indexOf('isDraggable')) {
            var mousePosition = {x:event.clientX, y:event.clientY};

            document.addEventListener('mousemove', drag, false);
            document.addEventListener('mouseup', function (e){
                document.removeEventListener('mousemove', drag, false);
                document.removeEventListener('mouseup', arguments.callee, false);
            }, false);

        }
    }, false);
};

// Then in your main module/application, you simply pass the ID of the top-level element
isDraggableWindow.call(document.getElementById('topLevelHTMLElementInApp'));

We added the following restrictions to the original code.

1. Only works on left-mouse click.
2. Only elements that have been assigned the ‘isDraggable’ CSS class will trigger window drag. This class doesn’t actually have to exist – it just needs to be added to the HTMLElement. Without this restriction, clicking on ANYTHING in the app and dragging will move the window.