HTML/CSS 可拖动元素

Question

美好的一天。 我正在尝试使用非常简单的基于 HTML/CSS 的可拖动树表示构建一个应用程序。

<div class="tree">
  <div class="leaf" draggable=true>
    <div class="leaf-handle">item 1</div>
    <div class="leaf subleaf" draggable=true>
      <div class="leaf-handle">item 1.1</div>
      <div class="leaf subsubleaf" draggable=true>
        <div class="leaf-handle">item 1.1.1</div>
      </div>
    </div>
  </div>
  <div class="leaf" draggable=true>
    <div class="leaf-handle">item 2</div>
    <div class="leaf subleaf" draggable=true>
      <div class="leaf-handle">item 2.1</div>
      <div class="leaf subsubleaf" draggable=true>
        <div class="leaf-handle">item 2.1.1</div>
      </div>
    </div>
  </div>
</div>

可以在此处找到重现该案例的代码示例： https://codepen.io/DerZinger/pen/bGQbEmd

我面临的问题是，当我尝试拖动分支（带有子项目的项目）时，“幽灵”图像（可拖动元素的表示）具有不透明的背景，无论我尝试什么，我都无法将其删除。

像这样：

而且我真的需要它是不可见的（鬼像仅显示当前拖动的分支的叶句柄）。

任何关于如何实现这一目标的帮助或指导将非常感激。

编辑1：有人建议删除背景颜色。尝试过，不幸的是这不起作用，这就是重点。 删除它，将其设置为不透明，等等 - 所有这些技巧最终都不会“隐藏”我想要隐藏的区域：

Answer 1

在针对您的问题测试了几种解决方法并进行了在线研究之后，我终于想出了一个不错的解决方案； 不是完美的，但是当今最好的。

代码：

document.addEventListener("dragstart", function (event) {
  document.querySelector(".tree").style.backgroundColor = "transparent";
  event.target.style.background = "transparent";
  setTimeout(() => {
    document.querySelector(".tree").style.backgroundColor = "red";
    event.target.style.background = "yellow";
  }, 100);
});

.leaf {
  background-color: yellow;
  width: 200px;
}
.leaf-handle {
  background-color: green;
  border: 1px solid black;
}
.tree {
  background-color: red;
  display: flex;
  flex-direction: column;
}

.subleaf {
  padding-left: 30px;
}
.subsubleaf {
  margin-left: 60px;
}

<div class="tree">
  <div class="leaf" draggable="true">
    <div class="leaf-handle">item 1</div>
    <div class="subleaf">
      <div class="leaf-handle">item 1.1</div>
      <div class="subsubleaf">
        <div class="leaf-handle">item 1.1.1</div>
      </div>
    </div>
  </div>
  <div class="leaf" draggable="true">
    <div class="leaf-handle">item 2</div>
    <div class="leaf subleaf" draggable="true">
      <div class="leaf-handle">item 2.1</div>
      <div class="leaf subsubleaf" draggable="true">
        <div class="leaf-handle">item 2.1.1</div>
      </div>
    </div>
  </div>
</div>
<div class="tree">
  <div class="leaf" draggable="true">
    <div class="leaf-handle">item 1</div>
    <div class="leaf subleaf" draggable="true">
      <div class="leaf-handle">item 1.1</div>
      <div class="leaf subsubleaf" draggable="true">
        <div class="leaf-handle">item 1.1.1</div>
      </div>
    </div>
  </div>
  <div class="leaf" draggable="true">
    <div class="leaf-handle">item 2</div>
    <div class="leaf subleaf" draggable="true">
      <div class="leaf-handle">item 2.1</div>
      <div class="leaf subsubleaf" draggable="true">
        <div class="leaf-handle">item 2.1.1</div>
      </div>
    </div>
  </div>
</div>