Jquery mousedown + mousemove

Question

How can I create an event in JQuery triggered when the mouse is down and moving? And only triggered once each mousedown + mousemove?

Answer 1

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.

Answer 2

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
 }
});

Answer 3

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')
    });
});

Answer 4

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?

Answer 5

$("element").mousedown(function () {
    $(this).mousemove(function () {
        console.log("OK Moved!");
    });
}).mouseup(function () {
    $(this).unbind('mousemove');
}).mouseout(function () {
    $(this).unbind('mousemove');
});

Answer 6

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

Answer 7

The answer can be found in another SO topic:
Firefox drags div like it was an image

You need to return false from the event handlers to prevent the default action

Once I put a return false in my event handlers, it worked like a charm.

Answer 8

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).

Answer 9

setTimeout(function(){

  var radiobox_state;
  $('input[type="radio"]').mousedown(function(){
    radiobox_state=this.checked
  })

  $('input[type="radio"]').click(function(){
    if(radiobox_state){
      $(this).prop("checked",false);
    }
  })
  
}, 500);

Answer 10

e.preventDefault();

and e is the event handler you pass to the function

Answer 11

$(document).on('mousedown', function() {
    $(document).bind('mousemove', function() {
        $('#id-name').dosomething();
    });
});


$(document).on('mouseup', function() {
    $(document).unbind('mousemove');
});

Answer 12

we use $.bind() like this:

$('#div').bind('mousemove mousedown', function(){});

This mean either mousemove or mousedown fired, the function would execute. so in the function, we still able to check if left button is press by using event.which equal to 1. so the code should look like this:

$('#div').bind('mousemove mousedown', function(e){
        if(e.which == 1){
            //let the fun begin
        }
    });

Answer 13

May be:

$('input').mousedown(function{
    $('input').mousemove({
      etc
    });
});

but for some reason i think you already tried that..