html5可拖動隱藏原始元素

當開始使用HTML5可拖動屬性拖動元素時，原始元素仍然可見，所以我最終得到了兩個可見元素而不是一個元素。html5可拖動隱藏原始元素

我該怎麼做才能讓被拖動的元素可見（應該暫時隱藏原始元素）。

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

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

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

這裏有一個的jsfiddle顯示問題https://jsfiddle.net/gjc5p4qp/

來源

2016-04-02 julesbou

你可能會成功，這是一個哈克的解決方案。本機可拖動性不允許CSS樣式，如：opacity:0;,visibility:hidden或display:none。您可以使用：transform:translateX(-9999px)。

我已更新您的JSFiddle的解決方案。

來源

2016-04-02 23:07:27 Filipe

哇，太好了，你知道如何拖動的元素的不透明度設置爲1？ – julesbou

哈哈，謝謝。我找不到這樣做的方式，似乎被拖動的「鬼元素」在DOM上不可用，所以我們有一些限制。看看這個[回答]（http://stackoverflow.com/a/10904112/3938676） – Filipe

@julesbou菲利普仍然沒有適當的解決方案呢？ – Anthony

由於簡單地設置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>

來源

2016-04-03 13:21:30 Hatchet

除了使用'setTimeout'，可以用於此用'window.requestAnimationFrame'： '函數的startDrag（E）{ window.requestAnimationFrame（函數（）{ e.target.style.visibility = 「隱藏」 ; }）; }' –

@Andrew避免任何想法如何防止不透明度降低？！ – Anthony

html5可拖動隱藏原始元素

回答

相關問題