title: Bind mousemove to mousedown event (jQuery)
body: <p>I am creating a horizontal scroll site. Don't hate!  Everything seems to be working fine except when i bind the mousemove event on mousedown the dom scrollLeft property is not changing. 'moving' and 'mouseup' are both being written to the console at the appropriate times.  Here is my code...
  EDIT: Also, I noticed that if I write $('#container').scrollLeft to the console on mousedown it returns 'function()' instead of a value.</p>
  
  <pre><code>$(document).ready(function() {
      $('#container').mousedown(function(event) {
          $(this)
              .data('down',true)
              .data('x',event.pageX)
              .data('scrollLeft',this.scrollLeft)
              .css({'cursor':'url("http://www.loodieloodieloodie.com/images/closedhand.cur"),auto'});
          $('body').bind('mousemove',function(event) {
              console.log('moving');
              $('#container').scrollLeft = $('#container').data('scrollLeft') + ($('#container').data('x') - event.pageX) * 2;
          }).bind('mouseup',function() {
              $('#container')
                  .data('down',false)
                  .css({'cursor':'url("http://www.loodieloodieloodie.com/images/openhand.cur"),auto'});
              console.log('mouseup');
              $(this).unbind('mousemove');
          });
          return false;
      }).css({
          'overflow':'hidden',
          'cursor':'url("http://www.loodieloodieloodie.com/images/openhand.cur"),auto'
      });
  });
  </code></pre>
  
  <p>and here is the basic html...</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="inner"&gt;
              CONTENT
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Thanks for the help,
  B</p>