html5 draggable隐藏原始元素

Question

当开始使用HTML5 draggable属性拖动元素时,原始元素仍然可见,因此我最终得到两个可见的元素而不是一个.

如何只拖动可见的元素(原始元素应暂时隐藏).

<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/

Answer 1

这可以在没有以前答案中的技巧的情况下实现。

关键点是监听事件drag，而不是dragstart.

//listen to drag event, not dragstart!
document.querySelector(".draggable").addEventListener("drag", (e)=>{
  e.target.classList.add("dragging");
});
document.querySelector(".draggable").addEventListener("dragend", (e)=>{
  e.target.classList.remove("dragging");
});

.draggable {
  width: 200px;
  height: 30px;
  background-color:#5856d6;
  text-align:center;
  line-height:30px;
}

.dragging {
  background: transparent;
  color: transparent;
  border: 1px solid #5856d6;
}

<div draggable="true" class="draggable">Drag me!</div>

Answer 2

你可能会成功这个hacky解决方案.原生可拖动性不允许CSS样式,如:opacity:0;,visibility:hidden或display:none.

但你可以使用:transform:translateX(-9999px).

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

Answer 3

由于简单地设置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>

Answer 4

如何隐藏你的元素

如果您想隐藏元素，可以使用 CSS 属性visibility:hidden或display:none.

我建议使用该visibility属性，因为它隐藏元素而不更改文档的布局。但是，如果您有子元素并且想要将它们隐藏，则需要visibility:inherit对每个子元素进行设置。

什么时候隐藏它

您使用该dragstart事件是正确的。但是由draggable属性创建的元素的克隆出现在事件的末尾dragstart。

因为 JavaScript 引擎是一个单线程解释器，如果您选择将其隐藏在这里，您的元素将被屏蔽为其克隆，该克隆将复制属性visibility:hidden。事实上，为了避免这种情况，您需要在Javascript callstack中创建克隆后将其隐藏。

为此，请使用该setTimout()函数并将其设置为 0 ms。这样，在创建其克隆之后，原始元素的掩码将被放置在堆栈的末尾。

拖动结束时，要使其重新出现，只需visibility:visible在dragend事件中调用将元素设置为可见即可。

代码示例

以您为例，代码可能如下所示：

<div 
    class="draggable" 
    draggable="true" 
    ondragstart="startDrag(event)" 
    ondragend="endDrag(event)" 
    style="background: #e66465; color:white; width:80px; height:20px; text-align:center;">
    Drag me
</div>

<script>
    function startDrag(e) {
        setTimeout(function(){
            e.target.style.visibility = "hidden";
        }, 0);
    }
    function endDrag(e){
        e.target.style.visibility = "visible";
    }
</script>