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可拖动隐藏原始元素

回答

相关问题