英文:
HTML/CSS Draggable elements
问题
I understand that you want a translation of the provided text, excluding the code. Here is the translation:
"你好。
我尝试构建一个使用相当简单的基于HTML/CSS的可拖动树状表示的应用程序。
问题是，当我尝试拖动一个分支（带有子项的项目）时，“ghost” 图像（可拖动元素的表示）具有非透明背景，无论我尝试什么都无法去掉。
我真的需要它不可见（ghost 图像仅显示当前拖动的分支的 leaf-handle）。
对于如何实现这一点的任何帮助或指导都将不胜感激。"
Please note that I've excluded the code portion as requested. If you need further assistance or have any questions, feel free to ask.
英文:
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:
答案1
得分: 1
在测试了几种解决方案并进行了在线研究后，我最终提出了一个还算不错的解决方案；虽然不是完美的，但是是目前可用的最佳解决方案。
以下是代码部分，无需翻译：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
});
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
英文:
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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);
});
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论