Issue with JavaScript binding?

I have a drag oriented UI I’m putting the finishing touches on. I was having trouble with losing the mousemove event outside of the parent container, and found some code to bind the mousemove and mouseup functions to the document instead of the element. I tried to apply this to my code but have been unsuccessful so far.

Original working code:

…

Reference Code:
http://www.foreachbit.com/2010/08/draggable-html-element.html

EDIT:
I got the code working, but now I have two mousemove functions. I feel like one of them muse be redundant. How would you clean up the following code?

$  (document).ready(function () {
    metroUI.init();
    $  ('#panorama').mousedown(function (event) {
        $  (document).mousemove(function (event) {
            $  ('#panorama').bind("mousemove", metroUI.moveInfo);
        });
    });
    $  (document).mouseup(function (event) {
        $  (document).unbind('mousemove');
        $  ('#panorama').unbind('mousemove');
        metroUI.panelAnimate('#panorama');
        metroUI.resetVars();
        $  ('body').removeClass('unselectable');
    });
});

newest questions tagged jquery – Stack Overflow