Cursor type: move ONLY when drag

Question

I implemented an element to have a drag function using JQuery UI with a cursor type of "move". I have an element, that's nested in the draggable div, let's call it 'inner', which has an onclick event, and when you hover over it, the cursor changes to "pointer" (through CSS).

What I Want to Achieve:

• I want the cursor to be "move" whenever you drag it, no matter what element your mouse is on, whether it's on inner or draggable.
• I also want inner to have a cursor type of "pointer" whenever hovered or clicked on. But once you start dragging it, the cursor should change to "move".

What Actually Happens

When the cursor is on inner, and you start dragging, the cursor stays "pointer", it doesn't change to "move".

I tried:

#draggable *:active {
  cursor: move;
}

what happens is, when you click not drag inner, the cursor changes to "move".

How can I make the cursor become "move" only when you drag the 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>

Answer 1

The class .ui-draggable-dragging is added to the element when it is being dragged.

Therefore, you can use this class to determine if the #inner element is being dragged. Just use the selector .ui-draggable-dragging #inner, and set cursor: move:

Updated Example

#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>

Since jQuery UI is already setting cursor: move on the body element when the element is being dragged, you can also just override cursor: pointer with cursor: inherit:

Example Here

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

---

It's also worth mentioning that you can achieve this with a single selector by negating the .ui-draggable element if it has a class of .ui-draggable-dragging:

Example Here

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