html5 draggable隐藏原始元素

问题描述

当开始使用HTML5 draggable属性拖动元素时，原始元素仍然可见，所以我最终得到两个元素而不是一个。

When starting to drag an element using HTML5 draggable attribute, original element is still visible, so I end up having two elements visible instead of one.

我怎么能do只有被拖动的元素可见（原始元素应该暂时隐藏）。

How can I do to have only the element being dragged visible (the original one should be momentarily hidden).

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

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

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

这是一个显示问题的方法

Here's a jsfiddle to show the problem https://jsfiddle.net/gjc5p4qp/

推荐答案

你可能会成功这是一个hacky解决方案。原生可拖动性不允许CSS样式，如：不透明度：0; ，可见性：隐藏或 display：none 。

You may succeed this a hacky solution. The native draggability doesn't allow CSS styles like: opacity:0;, visibility:hidden or display:none.

但你可以使用： transform：translateX（-9999px）。

我已更新您的与解决方案。

I've updated your JSFiddle with the solution.

这篇关于html5 draggable隐藏原始元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！