Cursor type: move ONLY when dragging

Question

I have implemented an element for the drag and drop function JQuery UIwith the cursor type "move". I have an element that is nested in draggable div, let it call it “internal”, which has an event onclick, and when you hover over it, the cursor changes to “pointer” (via CSS).

What I want to achieve:

• I want the cursor to be “moved” whenever you drag it, no matter what element is on your mouse, regardless of whether it is on inneror draggable.
• I also want the innercursor type to be "pointer" each time it hangs or clicks. But as soon as you start dragging it, the cursor should change to "move".

What is really going on

When the cursor is on inner, and you start dragging, the cursor remains a "pointer", it does not change to "move".

I tried:

#draggable *:active {
  cursor: move;
}

happens when you do not drag inner, the cursor changes to "move".

How can I make the cursor "move" only when dragging a div?

Jsfiddle

$('#draggable').draggable({
  cursor: "move"
});

$('#inner').click(function() {
  $(this).css('background-color', 'orange');
});

#draggable {
  background-color: pink;
  width: 200px;
  height: 200px;
}
#inner {
  background-color: red;
  width: 100%;
  height: 50px;
}
#inner:hover {
  cursor: pointer;
}
/*
#draggable *:active {
  cursor: move;
}
*/

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
<style type="text/css"></style>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">



<div id="draggable">
  <div id="inner"></div>
</div>

Run codeHide result

Answer 1

.ui-draggable-dragging .

, , , #inner. .ui-draggable-dragging #inner cursor: move:

#inner {
  cursor: pointer;
}
.ui-draggable-dragging #inner {
  cursor: move;
}

$('#draggable').draggable({
  cursor: "move"
});

$('#inner').click(function() {
  $(this).css('background-color', 'orange');
});

#draggable {
  background-color: pink;
  width: 200px;
  height: 200px;
}
#inner {
  background-color: red;
  width: 100%;
  height: 50px;
}
#inner {
  cursor: pointer;
}
.ui-draggable-dragging #inner {
  cursor: move;
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
<style type="text/css"></style>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">



<div id="draggable">
  <div id="inner"></div>
</div>

Hide result

jQuery UI cursor: move body, , cursor: pointer cursor: inherit:

#inner {
  cursor: pointer;
}
.ui-draggable-dragging #inner {
  cursor: inherit;
}

---

, , .ui-draggable, .ui-draggable-dragging:

.ui-draggable:not(.ui-draggable-dragging) #inner {
  cursor: pointer;
}