Jquery mousedown + mousemove

Question

Updated:

So, it looks like if your mouse is no longer over the element on which onmouseup is bound, it won't see the mouse up event. Makes sense, when you stop and think about it, but when the mousedown event happens over the element, we expect, as UI users, for it to know when it was released (even if it isn't over the element).

So, to get around this, we actually detect the mouseup on the document level.

var clicking = false;

$('.selector').mousedown(function(){
    clicking = true;
    $('.clickstatus').text('mousedown');
});

$(document).mouseup(function(){
    clicking = false;
    $('.clickstatus').text('mouseup');
    $('.movestatus').text('click released, no more move event');
})

$('.selector').mousemove(function(){
    if(clicking == false) return;

    // Mouse click + moving logic here
    $('.movestatus').text('mouse moving');
});

I tried this out on jsbin, and it seems to work. Check it out here: http://jsbin.com/icuso. To edit it (see the JS and HTML), just tag "edit" on the end of the URL. http://jsbin.com/icuso/edit.

use following code

$(element).mousemove(function(e){
 if(e.which==1)
 {
   #do job
 }
});

Update :
For some browsers you may want to use this :

$(element).mousemove(function(e){
 if(e.buttons==1)
 {
   #do job
 }
});

I did the following for an audio volume controller:

$('#control-vol').bind('mousedown', function(e){
    $('#control-vol').bind('mousemove', function(e){
        var volumen = e.pageX - this.offsetLeft;
        $('#barra-vol').width(volumen + 'px');
        $('audio')[7].volume = volumen/50;
    });

    $('#control-vol').bind('mouseup',function(){
        $('#control-vol').unbind('mousemove')
    });
});

This might help the situation... there is some difficulty when dealing w/ iframes. I'm currently working on a project needing to resize elements in an iframe.

Say you have an iframe with an id of 'iframe'. I have only tested this in FF, but it's working:

var $iframe = $('#iframe');
$iframe.load(function()
{
  var $body = $iframe.contents().find('HTML');
  /* ...bind your events here to $body.. */
  $body.mousedown(function(){...});
  $mody.mouseup(function(){...});
}

I try to bind everything to the document, or in this case, to the iframe's document, and then when an event happens, I call a function that determines what exactly was the target. Keep in mind that jQuery has a pretty cool feature in that you can wrap the event target in a jQuery function:

$(selector).click(function(e)
{
  var id = $(e.target).attr('id');
});

Hope this helps! And I hope it works in the other browsers or I'm going to be really frustrated in a few days :o

document.onmousedown = function(e) {
    e = e || window.event;
    var button = (type e.which != "undefined") ? e.which : e.button;
    if (button == 1) {
        alert("Left mouse button down");
    }
};

javascript event e.which?

For anyone else coming to this thread in search of generic assistance for jQuery mouseup, mousemove and mousedown using dynamically loaded content, I found (In chrome at least) this modification of Matt's post to be functional:

var clicking = false;

$('.selector').live("mousedown",function(){
    clicking = true;
    $('.clickstatus').text('mousedown');
});

$(document).live("mouseup",function(){
    clicking = false;
    $('.clickstatus').text('mouseup');
    $('.movestatus').text('click released, no more move event');
})

$('.selector').mousemove(function(){
    if(clicking == false) return;

    // Mouse click + moving logic here
    $('.movestatus').text('mouse moving');
});

http://api.jquery.com/live/ jQuery $.live() binds to all present and future elements, so if you need to add a mousemove and mousedown to a dynamically created element, this should work (again, in chrome at least).