Vinculación del mousemove dentro de la función de mousedown con jQuery

Question

Estoy intentando vincular un evento mousemove a un div cuando el botón izquierdo del mouse está abajo, y desatarlo cuando se suelta. Este código debería ser bastante auto explicativo.

function handleMouseDown(e, sbar){ 
    if (e.button == 0){ 
     console.log(sbar); //firebug 
     sbar.bind('mousemove', function(event){ 
      handleMouseMove(event, sbar); 
     }); 
    } 
} 

function handleMouseUp(e, sbar){ 
    sbar.unbind('mousemove');  
} 

function handleMouseMove(e, sbar){ 
    // not sure it this will work yet, but unimportant 
    $(".position").html(e.pageX); 
} 

$(document).ready(function(){ 

    var statusbar = $(".statusbar"); 

    statusbar.mousedown(function(event){ 
     handleMouseDown(event, this); 
    }); 

    statusbar.mouseup(function(event){ 
     handleMouseUp(event, this); 
    }); 

}); 

La parte importante del HTML se parece a esto

<div id="main"> 
    <div class="statusbar"> 
     <p class="position"></p> 
    </div> 
</div> 

Firebug dice que los métodos de vinculación no están definidos en la variable SAVR dentro handleMouseDown y handleMouseUp. La consola Firebug imprime <div class="statusbar"> para la línea comentada // firebug.

Estoy haciendo algo mal, probablemente al vincular el mousedown y el mouseup ... pero ¿qué? Estoy usando jQuery v1.4.2, si eso ayuda?

Answer 1

.bind() y .unbind() son funciones de jQuery, por lo que necesita un ligero ajuste, en lugar de esto:

sbar.bind('mousemove', function(event){ 
     handleMouseMove(event, sbar); 
    }); 

Usted necesita esto (lo envuelve como un objeto jQuery):

$(sbar).bind('mousemove', function(event){ 
     handleMouseMove(event, sbar); 
    }); 

El mismo para el .unbind():

$(sbar).unbind('mousemove'); 

You can see a working demo with only those corrections here :)