html5 draggable hide original element

Question

When starting to drag an element using HTML5 draggable attribute, original element is still visible, so I end up having two elements visible instead of one.

How can I do to have only the element being dragged visible (the original one should be momentarily hidden).

<script>   function startDrag() {     // hide initial element   }    function endDrag() {     // reset initial element   } </script>  <div class="draggable" draggable="true"   ondragstart="startDrag(event)"   ondragend="endDrag(event)" ></div> 

Here's a jsfiddle to show the problem https://jsfiddle.net/gjc5p4qp/

Answer 1

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.