HTML/CSS Draggable elements

Der Zinger

Good day. I am trying to build an application with pretty simple HTML/CSS-based draggable tree representation.

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

Code example reproducing the case can be found here: https://codepen.io/DerZinger/pen/bGQbEmd

Issue I'm facing is that when I try to drag a branch (item with subitems) the "ghost" image (representation of draggable elements) have non-transparent background, which I cannot remove regardless of what I try.

Like this:

And I really need it to be non-visible (ghost image showing only leaf-handles of the branch, that is currently dragged).

Any help or guidance on HOW that can be achieved would be very appreciated.

Edit 1: Someone suggested removing background color. Tried that, and unfortunately that does not work, and that's the whole point. Removing it, setting it opaque, and whatever - all these tricks do not ultimately "hide" that area which I want to hide:

underflow

After testing several workarounds with your problem and doing online research about it, I came up finally with a decent solution; not the perfect one but the best available today.

Code:

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2023-06-8

Comments

0 comments

TOP Ranking

Article