html5 draggable मूल तत्व को छिपाएं

Question

एचटीएमएल 5 ड्रैगगेबल विशेषता का उपयोग करके तत्व खींचने के लिए, मूल तत्व अभी भी दिखाई दे रहा है, इसलिए मैं एक के बजाय दो तत्व दिखाई देता हूं।

मैं केवल तत्व को खींचने के लिए कैसे कर सकता हूं (मूल को क्षणिक रूप से छुपाया जाना चाहिए)।

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

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

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

यहाँ समस्या https://jsfiddle.net/gjc5p4qp/

Answer 1

आप इस एक hacky समाधान सफल हो सकते दिखाने के लिए एक jsfiddle है। देशी ड्रैगगेबिलिटी सीएसएस शैलियों की अनुमति नहीं देती है जैसे: opacity:0;, visibility:hidden या display:none।

लेकिन आप इसे उपयोग कर सकते हैं: transform:translateX(-9999px)।

मैंने समाधान के साथ अपने JSFiddle को अद्यतन किया है।

Answer 2

बस visibility: hidden सेट करने के बाद से काम नहीं करता है, मुझे कुछ और हैकी समाधान मिला: ड्रैग इवेंट शुरू होने के बाद visibility: hidden एक मिलीसेकंड सेट करें।

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>