On drag - header/background text selection (Chrome/Firefox)

[ghost]

When you drag a dialog quickly in chrome and FF, the header text still gets selected along with any background elements you pass over.

Fix: Simply add return false; to the end of the _dragStart method to cancel selection.

_dragStart: function (event)
{
    if (event.rightClick) return;

    MUX.Dialog.currentDialogParams = {
        box: this.box,
        mouse: {
            x: event.client.x,
            y: event.client.y
        },
        browser: $(window).getSize()
    }

    $(document).addEvents({
        mousemove: MUX.Dialog._dragMoving,
        mouseup: MUX.Dialog._dragEnd
    });

    return false;
}

Seriously though, I love this class. Very elegant!

[ghost]

Just found a problem with the fix -- if you click outside the dialog, and try to click back onto it via the header it doesn't re-add .mux-dialog-focused. It does on the dialog body however.

[ghost]

The temporary fix I put in place was to add/remove a CSS class for the document.body element during _dragMoving and _dragEnd

.mux-body-dialog-moving {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

with the following script changes:

MUX.Dialog._dragMoving = function (event)
{
    ...

    params.box.addClass('mux-dialog-moving');
    document.body.addClass('mux-body-dialog-moving');

    ...
}


MUX.Dialog._dragEnd = function (event)
{
    MUX.Dialog.currentDialogParams.box.removeClass('mux-dialog-moving');
    document.body.removeClass('mux-body-dialog-moving');

    ...
}