title: Cursor unpleasantly changes during drag operation in nested elements
body: <p>As you can see in this live example: <a href="http://jsfiddle.net/VU328/" rel="nofollow noreferrer">http://jsfiddle.net/VU328/</a> when we are trying to drag the main draggable element (<code>div.outer</code>) every time mouse goes over <code>div.inner</code> or even when it goes outside the draggable box (i.e. goes inside <code>body</code> area) cursor quickly changes to not-allowed and immedialtely changes back to normal move.</p>
  
  <p>There is the markup to show a nested situation:</p>
  
  <pre><code>&lt;div class='outer' draggable='true' &gt;
      &lt;div class='inner' &gt;
          abc
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the minimum Javascript code that allows default drag effect:</p>
  
  <pre><code>$(document.body).bind('dragover', function(e) {
      e.preventDefault();
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/NCSre.png" alt="Mockup cursor movement"></p>
  
  <p>It happens at least on Windows and in Chrome (36.0.1985.125 m) and in IE (11.0.9600.17207).</p>
  
  <p>Is there any "standard" fix which works with html5 native drag API? (i.e. not with replacing cursor with some image or covering <code>div.outer</code> with another <code>div</code> or using jquery-ui or similar libraries)</p>