title: How to style the item being dragged with HTML 5 Drag And Drop API
body: <p>We are using the the HTML 5 Drag and Drop API for a project.</p>
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API</a></p>
  <p>Everything works ok, and now we need to be able to have different styles for the
  original item source and for the item being dragged.</p>
  <p>The issue we are having is that the item being dragged is always semi-transparent.</p>
  <p>We are not allowed to share the code, but this is an examples we used as a base</p>
  <p><a href="https://www.w3schools.com/html/html5_draganddrop.asp" rel="nofollow noreferrer">https://www.w3schools.com/html/html5_draganddrop.asp</a></p>
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  function allowDrop(ev) {
    ev.preventDefault();
  }
  
  function drag(ev) {
    ev.dataTransfer.setData(&quot;text&quot;, ev.target.id);
  }
  
  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData(&quot;text&quot;);
    ev.target.appendChild(document.getElementById(data));
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id=&quot;div1&quot; ondrop=&quot;drop(event)&quot; ondragover=&quot;allowDrop(event)&quot;&gt;&lt;/div&gt;
  
  &lt;img id=&quot;drag1&quot; src=&quot;img_logo.gif&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; width=&quot;336&quot; height=&quot;69&quot;&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>What we need is to</p>
  <ul>
  <li>Have the original item source background changed to gray</li>
  <li>Have the item being dragged background changed to blue, and not being semi-transparent.</li>
  </ul>
  <p>Thanks for the help.</p>