Cursor style doesn't update when element dynamically moved under it

Question

When an element is dynamically moved under the location of the cursor, the cursor style doesn't update until the user moves the cursor at least 1px. For example, say I have some Javascript that moves this div directly under the cursor on mouse click.

<div style="cursor:move">hover me!</div>

If you hover over the div, the cursor will change to move. However, if you click and the div gets moved under your cursor, the cursor remains the default arrow until you move the cursor at least 1px.

Here's a JSFiddle demo.

Is there a way to directly change the cursor via Javascript or force the cursor to update properly?

Answer 1

Temporarily manually setting the cursor to move seems to work. As soon as the mouse is moved again, the JS-applied CSS is cleared + normal behavior takes over.

http://jsfiddle.net/x0nbvt25/2/

$(document).ready(function(){
    $("body").on("click", function(c){
        $(".drag").offset({
            top: c.pageY-8,
            left: c.pageX-25
        });
        $("body").css("cursor", "move");
        $("body").mousemove(function(){
            $("body").css("cursor", '');
        });
    });
});