html5可拖动隐藏原始元素

Question

当开始使用 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/

原文由 julesbou 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以通过一个 hacky 解决方案来成功。本机可拖动性不允许 CSS 样式，例如： opacity:0; 、 visibility:hidden 或 display:none 。

但您可以使用： transform:translateX(-9999px) 。

 function startDrag(e) {
  let element = e.target;

  element.classList.add('hide');
}

function endDrag(e) {
  let element = e.srcElement;

  element.classList.remove('hide');
}

 .draggable {
  border-radius: 4px;
  background: #CC0000;
  width: 40px;
  height: 40px;
}
.hide {
  transition: 0.01s;
  transform: translateX(-9999px);
}

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

我已经用解决方案更新了你的 JSFiddle 。

[编辑]：

通过使用 requestAnimationFrame 而不是 setTimeout 更新了 JSFiddle 示例，其中包含 Andrew Hedges 的 建议。

[编辑 2]：

Jason Yin 更新了一个更好的解决方案，添加了 transition CSS 属性，而不是使用 requestAnimationFrame ，它将处理从脚本编写转移到渲染。

原文由 Filipe 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Hatchet 发布，翻译遵循 CC BY-SA 3.0 许可协议