'onmousedrag' event js

Question

I have some code that works each time onmouseclick and continuously onmousemove when I set them accordingly. I am looking for a way to combine the two (i.e. like a click and drag) which I thought would be a simple task but cannot find any simple explanation. The closest I get is drag-and-drop tutorials.

Do I have to call the onmousemove event while the onmouseclick event is triggered? Or is there something really simple I am completely overlooking?

score 16 · Accepted Answer · answered Jul 25 '11 at 16:12

16

You might want to just use a flag like this: http://jsfiddle.net/n3MeH/.

var isMouseDown = false;
document.onmousedown = function() { isMouseDown = true  };
document.onmouseup   = function() { isMouseDown = false };
document.onmousemove = function() { if(isMouseDown) { /* do drag things */ } };

answered Jul 25 '11 at 16:12

pimvdb

151,816
78
307
352

Such a simple answer, can't believe I never thought of flags in events when the rest of my code is littered with them. Thanks – myol Jul 26 '11 at 11:28
1

This does not work 100% if you wish to do the dragging on other elements than the document. If you start the drag on a canvas, or some other element, and dragging the mouse out of that element you will not get the onmouseup callback, thus getting the isMouseDown stick at true. – Automatico Jul 07 '12 at 18:53
@Cort3z: Are you sure? Events bubble up with the end point being `document`. In fact, even if you release the mouse outside the browser window the `mouseup` event gets fired. At least that's what I'm experiencing in Chrome. Does [this](http://jsfiddle.net/n3MeH/6/) not work as described? – pimvdb Jul 07 '12 at 19:40
1

@pimvdb I was making a point in the case where you did not use the document as your element. Thus this method only works if you use it on the document element. – Automatico Jul 08 '12 at 00:21
@Cort3z: You could bind `mousedown`/`mousemove` to the element and bind `mouseup` to the document. That should solve that issue. – pimvdb Jul 08 '12 at 08:51

score 5 · Answer 2 · answered Aug 28 '15 at 07:33

If you don't want to use global variable for dragging, you can use event.buttons for determining which mouse button is pressed.

I tested this code in Chrome and Firefox.

document.onmousemove = function(event) {
    if(event.buttons == 1) { //dragged with left mouse button
        //your code
    }

    if(event.buttons > 0) { //dragged with any mouse button
        //your code
    }
}

Paul · Answer 3 · 2011-07-25T16:20:13.270

5

You could try something like this:

var div = document.getElementById('ex');

div.onmousedown = function(){
    document.onmousemove = function(e){
        div.innerText = '('+e.pageX +', '+e.pageY+')';
    }
    document.onmouseup = function(e){
        div.innerText = 'Click Me!';
        document.onmousemove = function(){};
    }
}

It binds the documents mousemove and mouseup event on the divs mousedown.

http://jsfiddle.net/Paulpro/cSKq2/

edited Jul 25 '11 at 16:20

answered Jul 25 '11 at 16:12

Paul

139,544
27
275
264

@Joseph Haha Well done! It's basically a playable game now :) – Paul Jul 25 '11 at 16:21

Robot Woods · Answer 4 · 2011-07-25T16:20:15.227

0

if I'm understanding correctly I think you just want to break your onmouseclick into onmousedown and onmouseup (like setting a draggable bool, and then revert it on mouse up...but since you said the closest you found is drag/drop info, maybe you mean something else?)

edited Jul 25 '11 at 16:20

answered Jul 25 '11 at 16:10

Robot Woods

5,677
2
21
30

score 0 · Answer 5 · answered Jul 25 '11 at 16:11

0

really simple... I hope :)

when the mousedown event is triggered, set a global "dragging" variable to true. Then when mouseup is triggered, set it to false.

answered Jul 25 '11 at 16:11

Joseph Marikle

76,418
17
112
129

'onmousedrag' event js

5 Answers5

Linked