html5 elemento nascosto trascinabile in pelle

Question

Quando si inizia a trascinare un elemento utilizzando l'attributo draggabile HTML5, l'elemento originale è ancora visibile, quindi alla fine ho due elementi visibili anziché uno.

Come posso fare per avere solo l'elemento che viene trascinato visibile (quello originale dovrebbe essere momentaneamente nascosto).

<script> 
    function startDrag() { 
    // hide initial element 
    } 

    function endDrag() { 
    // reset initial element 
    } 
</script> 

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

Ecco un jsfiddle per mostrare il problema https://jsfiddle.net/gjc5p4qp/

Answer 1

Si può avere successo questa una soluzione hacky. La trascinabilità nativa non consente stili CSS come: opacity:0;, visibility:hidden o display:none.

Ma è possibile farlo utilizzando: transform:translateX(-9999px).

Ho aggiornato il tuo JSFiddle con la soluzione.

Answer 2

Poiché la semplice impostazione di visibility: hidden non funziona, ho trovato un'altra soluzione un po 'hacky: impostare visibility: hidden un millisecondo dopo l'inizio dell'evento di trascinamento.

function startDrag(e) { 
 
    setTimeout(function() { 
 
    e.target.style.visibility = "hidden"; 
 
    }, 1); 
 
} 
 

 
function endDrag(e) { 
 
    setTimeout(function() { 
 
    e.target.style.visibility = ""; 
 
    }, 1); 
 
}

body { 
 
    display: inline-block; 
 
    outline: 1px solid black; 
 
} 
 
.draggable { 
 
    border-radius: 4px; 
 
    background: #CC0000; 
 
    width: 40px; 
 
    height: 40px; 
 
}

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

 
</div>