Change cursor while moving mouse

Question

I'm having a strange error with trying to put a "moving" class on an element when moving/dragging the mouse. I'm using jQuery 3.1.1 on Chrome 59.0.3071.115.

I've simplified my problem down to this example:

<html>
<head>
<style>
    .thing {
        display: block;
        width: 10em;
        height: 10em;
        background: green;
    }
    .moving {
        cursor: move;
    }
</style>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="thing"></div>
<script>
    $(document).ready(function(){
        var $thing = $('.thing');
        $thing.on('mousedown', function(e){
            $thing.addClass("moving");
            console.log("mousedown");
        }).on('mouseup', function(e){
            $thing.removeClass("moving");
            console.log("mouseup");
        });
    });
</script>
</body>
</html>

This will display a green box in the page, and fires events when you mouse-down and mouse-up on it.

What happens is...

Click the green box -- The "moving" class gets applied to the div (this can be seen in the Chrome Developer Tools: Elements tab), but the cursor stays the usual arrow. I would expect the cursor to change to the move cursor.
While holding down the click, drag a bit -- The cursor still remains the default arrow.
Release the click while on the green div -- The cursor switches to the move cursor for a moment, but switches back to the default arrow if the mouse is moved at all.

I've tried solutions like https://stackoverflow.com/a/16172027/1766230, and others, without luck. I've tried various combinations of selectors in the CSS, various elements, etc. Strangely when attempting this in jsfiddle everything works correct, but with this content as a stand-alone HTML file, I see the error.

Edit

Turns out it must have been a browser bug, because when I closed Chrome and re-opened it, this began working as expected. Is anyone aware of this kind of bug in Chrome?

working fine for me with your example.. what is the error you getting ? — Selvakumar, Jul 14 '17 at 05:06
No error. The strange behavior is explained in the numbered list in the description. — Luke, Jul 14 '17 at 05:08
Working well for me please can you do one thing is replace your jquery (jQuery 3.1.1) to https://code.jquery.com/jquery-3.2.1.min.js. Might be it's related to some versioning issue in jquery side. — Emipro Technologies Pvt. Ltd., Jul 14 '17 at 05:12

score 1 · Answer 1 · answered Jul 14 '17 at 10:16

Just an alternative : (without JS)

Use tabindex
Selector is :active:hover

.thing {
  display: block;
  width: 10em;
  height: 10em;
  background: green;
  user-select: none;
  outline: none;
}

.thing:active:hover {
  cursor: move;
  background: red;
}

<div class="thing" tabindex="1"></div>

score 0 · Answer 2 · edited Jul 14 '17 at 09:57

drag != mousedown

Its a browser default dragging behaviour .Add the drag event with mousedown

$(document).ready(function() {
  var $thing = $('.thing');
  $thing.on('mousedown ,drag', function(e) {
    $thing.addClass("moving");
    console.log("mousedown");
  }).on('mouseup', function(e) {
    $thing.removeClass("moving");
    console.log("mouseup");
  });
});

.thing {
  display: block;
  width: 10em;
  height: 10em;
  background: green;
}

.moving {
  cursor: move;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="thing"></div>

Change cursor while moving mouse

Edit

2 Answers2