how to implement mousemove while mouseDown pressed js

Question

I have to implement mouse move event only when mouse down is pressed.

I need to execute "OK Moved" only when mouse down and mouse move.

I used this code

 $(".floor").mousedown(function() {
  $(".floor").bind('mouseover',function(){
      alert("OK Moved!");
  });
})
.mouseup(function() {
 $(".floor").unbind('mouseover');
});

Solution 1

Use the mousemove event.

From mousemove and mouseover jquery docs:

The mousemove event is sent to an element when the mouse pointer moves inside the element.

The mouseover event is sent to an element when the mouse pointer enters the element.

Example: (check console output)

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

https://jsfiddle.net/n4820hsh/

Solution 2

In pure javascript, you can achieve this with

function mouseMoveWhilstDown(target, whileMove) {
    var endMove = function () {
        window.removeEventListener('mousemove', whileMove);
        window.removeEventListener('mouseup', endMove);
    };

    target.addEventListener('mousedown', function (event) {
        event.stopPropagation(); // remove if you do want it to propagate ..
        window.addEventListener('mousemove', whileMove);
        window.addEventListener('mouseup', endMove);   
    });
}

Then using the function along the lines of

mouseMoveWhilstDown(
    document.getElementById('move'),
    function (event) { console.log(event); }
);

(nb: in the above example, you don't need the function - you could call it as mouseMoveWhilstDown(document.getElementById('move'), console.log), but you might want to do something with it other than output it to the console!)

Comments

[M1M6]

when u click in the box for the first time and move the mouse it works well , but when u move the mouse again the without button pressed it also work ! this is what i suffer from : 3 . i need to work only when mouse press and move .

[Tobías]

edited: need to unbind also when we leave the box. Now it should work only when you press the mouse inside the box and you move inside.