html5 sürüklenebilir orijinal öğeyi gizle

Question

HTML5 sürüklenebilir özniteliğini kullanarak bir öğeyi sürüklemeye başladığınızda, orijinal öğe hala görünüyor, dolayısıyla iki öğenin bir yerine görünür olmasını sağlarım.

Sadece sürüklenen öğeye sahip olmak için nasıl yapabilirim (orijinal olanın bir an önce gizlenmesi gerekir).

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

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

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

İşte problemi https://jsfiddle.net/gjc5p4qp/

Answer 1

Bunun bir hacky çözüm başarılı olabilir göstermek için bir jsfiddle bu. Yerel sürüklenebilirlik, CSS stillerini şu şekilde izin vermez: opacity:0;, visibility:hidden veya display:none.

Ancak bunu kullanarak yapabilirsiniz: transform:translateX(-9999px).

JSFiddle numaralı ürünümünü bu çözüm ile güncelledik.

Answer 2

visibility: hidden ayarı yapılmadığı için, başka bir hacky çözümü buldum: sürükleme olayı başladıktan sonra bir milisaniye visibility: hidden ayarlayın.

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>