Liaison de la souris dans la fonction mousedown avec jQuery

Question

J'essaie de lier un événement mousemove à un div lorsque le bouton gauche de la souris est enfoncé, et de le dissocier lorsqu'il est relâché. Ce code devrait être assez explicite.

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 partie importante du HTML ressemble à ceci

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

Firebug dit que les méthodes lient ne sont pas définies sur la variable sbar au sein handleMouseDown et handleMouseUp. La console firebug affiche <div class="statusbar"> pour la ligne commentée // firebug.

Je fais quelque chose de mal, probablement lors de la liaison entre le mousedown et le mouseup ... mais quoi ?! J'utilise jQuery v1.4.2, si cela peut vous aider?

Answer 1

.bind() et .unbind() sont des fonctions jQuery, vous avez donc besoin d'un léger ajustement, au lieu de cela:

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

avez-vous besoin (envelopper comme un objet jQuery):

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

Le même pour le .unbind():

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

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