html5 draggable hide original element

You may succeed this with a hacky solution. The native draggability doesn’t allow CSS styles like: opacity:0;, visibility:hidden or display:none.

But you can do it using: transform:translateX(-9999px).

function startDrag(e) {
  let element = e.target;
  
  element.classList.add('hide');
}

function endDrag(e) {
  let element = e.srcElement;
  
  element.classList.remove('hide');
}

.draggable {
  border-radius: 4px;
  background: #CC0000;
  width: 40px;
  height: 40px;
}
.hide {
  transition: 0.01s;
  transform: translateX(-9999px);
}

<div
  class="draggable"
  draggable="true"
  ondragstart="startDrag(event)"
  ondragend="endDrag(event)"
/>

I’ve updated your JSFiddle with the solution.

[EDIT]:

Updated JSFiddle example with Andrew Hedges suggestion by using requestAnimationFrame instead setTimeout.

[EDIT 2]:

Updated with a better solution by Jason Yin adding transition CSS property instead using requestAnimationFrame, it moves the processing from scripting to rendering.