title: Custom cursor with drag and drop an HTML element without libraries
body: <p>I have an HTML page which has some draggable elements. Our specs say that hovering mouse on such element the cursor <em>must</em> be <code>grab</code> <a href="https://i.stack.imgur.com/iz0m5.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/iz0m5.gif" alt="grab"></a>, and during drag cursor <em>must</em> be <code>grabbing</code> <a href="https://i.stack.imgur.com/yaIl8.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/yaIl8.gif" alt="grabbing"></a>.</p>
  
  <p>I know it is possible to set <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect" rel="noreferrer"><code>dropEffect</code></a> which changes cursor appearance above drop zone, but there are very little options: <code>copy</code>, <code>move</code>, <code>link</code>, and <code>none</code> -- no <em>custom</em> or alike.</p>
  
  <p>I have tried to change cursor with Javascript and CSS, like setting <code>cursor: grabbing;</code> when <code>ondragstart</code> is fired. But browser default move cursor appears instead when dragging on drop zone.</p>
  
  <p>So the question is: <strong><em>What am I missing to show grabbing cursor (<a href="https://i.stack.imgur.com/yaIl8.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/yaIl8.gif" alt="grabbing"></a>) during drag?</em></strong></p>
  
  <p>Unfortunately I cannot use JQuery or other helping libraries in the solution. Thanks in advance!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var onDragStart = function(event) {
      event.dataTransfer.setData("Text", event.target.id);
      event.currentTarget.classList.add("being-dragged");
  };
  
  var onDragEnd = function(event) {
      event.currentTarget.classList.remove("being-dragged");
  };
  
  var onDragOver = function(event) {
      event.preventDefault();
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dropzone {
      width: 500px;
      height: 200px;
      background-color: silver;
  }
  
  .block {
      position: absolute;
      background-color: pink;
      margin: 10px;
      border: 20px solid pink;
  }
  
  .draggable {
      cursor: -webkit-grab;
      cursor: grab;
  }
  
  .being-dragged {
      cursor: -webkit-grabbing;
      cursor: grabbing;
      background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class      = "dropzone"
      ondragover  = "onDragOver(event);"
      &gt;
      Grab and drag block around
      &lt;div class      = "draggable block"
          draggable   = "true"
          ondragstart = "onDragStart(event);"
          ondragend   = "onDragEnd(event);"
          &gt;
          I'm draggable
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>