Disable mousemove on click

Question

I'm experimenting on a drag 'n' drop, this is my code here:

$('.box-title').live('mousedown click', function(e)
{
    var self = $(this);
    var Box = self.parent('#box');

    if(e.type == 'mousedown')
    {
        $(window).mousemove(function(e)
        {
            Box.css({ cursor: 'move', top: e.pageY - 15, left: e.pageX - 125 });
        });
    }
    else if(e.type == 'click')
    {
        Box.css({ cursor: 'default', top: e.pageY - 15, left: e.pageX - 125 });
    }
});

On mousedown, it should initiate the dragging effect by moving the mouse, after that if I want to dock/drop the box where I want it to me, I click on it it should disable the moving but if I click on it, it doesn't stop moving - just keeps following my mouse. How can you stop the dragging?

score 8 · Accepted Answer · answered Jan 03 '11 at 19:38

You need to unbind the mousemove handler which is still attached currently, for example:

function setPos(e) {
  //can be $('#box') in this case...
  $(this).parent('#box').css({ cursor: 'move', top: e.pageY - 15, left: e.pageX - 125 });
}    
$('.box-title').live('mousedown click', function(e) {
    if(e.type == 'mousedown') {
        $(window).mousemove(setPos);
    }
    else if(e.type == 'click') {
        $(window).unbind('mousemove', setPos);
    }
});

Or, in jQuery 1.4.3+ that .live() handler can be a bit cleaner:

$('.box-title').live({
  mousedown: function() {
    $(window).mousemove(setPos);
  },
  click: function() {
    $(window).unbind('mousemove', setPos);
  }
});

As an aside, it appears you have multiple id="box" elements in the page...make sure to use classes in those cases, in this code $(this).parent('#box') would be $(this).closest('.box') instead.

Can't do anything without you. Thanks. – MacMac Jan 03 '11 at 19:51 — MacMac, Jan 03 '11 at 19:51

score 3 · Answer 2 · edited Jun 14 '16 at 13:11

3

Try adding

$(window).unbind('mousemove')

in your click event.

edited Jun 14 '16 at 13:11

Pierre Arnaud

10,212
11
77
108

answered Jan 03 '11 at 19:39

David Stinemetze

8,830
3
21
34

score 1 · Answer 3 · answered Jan 03 '11 at 19:39

else if(e.type == 'click')
{
    $(window).unbind('mousemove')
}

But really you should name the event so you only unbind the appropriate event listener.

Bind : $(window).bind('mousemove.dragging', function(){});

Unbind : $(window).unbind('mousemove.dragging', function(){});

Disable mousemove on click

3 Answers3

Linked