title: Cursor type: move ONLY when drag
body: <p>I implemented an element to have a drag function using <code>JQuery UI</code> with a cursor type of "move". I have an element, that's nested in the <code>draggable div</code>, let's call it 'inner', which has an <code>onclick</code> event, and when you hover over it, the cursor changes to "pointer" (through CSS).</p>
  
  <p><strong>What I Want to Achieve:</strong></p>
  
  <ul>
  <li>I want the cursor to be "move" whenever you drag it, no matter what element your mouse is on, whether it's on <code>inner</code> or <code>draggable</code>.</li>
  <li>I also want <code>inner</code> to have a cursor type of "pointer" whenever hovered or clicked on. But once you start dragging it, the cursor should change to "move".</li>
  </ul>
  
  <p><strong>What Actually Happens</strong></p>
  
  <p>When the cursor is on <code>inner</code>, and you start dragging, the cursor stays "pointer", it doesn't change to "move".</p>
  
  <p>I tried:</p>
  
  <pre><code>#draggable *:active {
    cursor: move;
  }
  </code></pre>
  
  <p>what happens is, when you click not drag <code>inner</code>, the cursor changes to "move".</p>
  
  <p>How can I make the cursor become "move" only when you drag the div?</p>
  
  <p><a href="http://jsfiddle.net/cwkya4qt/" rel="nofollow"><h3>JSFiddle</h3></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#draggable').draggable({
    cursor: "move"
  });
  
  $('#inner').click(function() {
    $(this).css('background-color', 'orange');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#draggable {
    background-color: pink;
    width: 200px;
    height: 200px;
  }
  #inner {
    background-color: red;
    width: 100%;
    height: 50px;
  }
  #inner:hover {
    cursor: pointer;
  }
  /*
  #draggable *:active {
    cursor: move;
  }
  */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;&lt;/style&gt;
  &lt;script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css"&gt;
  
  
  
  &lt;div id="draggable"&gt;
    &lt;div id="inner"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>