HTML/CSS 可拖动元素

huangapple
go评论97阅读模式
英文:

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.

  1. <div class="tree">
  2.   <div class="leaf" draggable=true>
  3.     <div class="leaf-handle">item 1</div>
  4.     <div class="leaf subleaf" draggable=true>
  5.       <div class="leaf-handle">item 1.1</div>
  6.       <div class="leaf subsubleaf" draggable=true>
  7.         <div class="leaf-handle">item 1.1.1</div>
  8.       </div>
  9.     </div>
  10.   </div>
  11.   <div class="leaf" draggable=true>
  12.     <div class="leaf-handle">item 2</div>
  13.     <div class="leaf subleaf" draggable=true>
  14.       <div class="leaf-handle">item 2.1</div>
  15.       <div class="leaf subsubleaf" draggable=true>
  16.         <div class="leaf-handle">item 2.1.1</div>
  17.       </div>
  18.     </div>
  19.   </div>
  20. </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:

HTML/CSS 可拖动元素

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:
HTML/CSS 可拖动元素

答案1

得分: 1

在测试了几种解决方案并进行了在线研究后，我最终提出了一个还算不错的解决方案；虽然不是完美的，但是是目前可用的最佳解决方案。

以下是代码部分，无需翻译：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  5. document.addEventListener("dragstart", function (event) {
  6.   document.querySelector(".tree").style.backgroundColor = "transparent";
  7.   event.target.style.background = "transparent";
  8.   setTimeout(() => {
  9.     document.querySelector(".tree").style.backgroundColor = "red";
  10.     event.target.style.background = "yellow";
  11.   }, 100);
  12. });
  14. <!-- language: lang-css -->
  16. .leaf {
  17.   background-color: yellow;
  18.   width: 200px;
  19. }
  20. .leaf-handle {
  21.   background-color: green;
  22.   border: 1px solid black;
  23. }
  24. .tree {
  25.   background-color: red;
  26.   display: flex;
  27.   flex-direction: column;
  28. }
  30. .subleaf {
  31.   padding-left: 30px;
  32. }
  33. .subsubleaf {
  34.   margin-left: 60px;
  35. }
  37. <!-- language: lang-html -->
  39. <div class="tree">
  40.   <div class="leaf" draggable="true">
  41.     <div class="leaf-handle">item 1</div>
  42.     <div class="subleaf">
  43.       <div class="leaf-handle">item 1.1</div>
  44.       <div class="subsubleaf">
  45.         <div class="leaf-handle">item 1.1.1</div>
  46.       </div>
  47.     </div>
  48.   </div>
  49.   <div class="leaf" draggable="true">
  50.     <div class="leaf-handle">item 2</div>
  51.     <div class="leaf subleaf" draggable="true">
  52.       <div class="leaf-handle">item 2.1</div>
  53.       <div class="leaf subsubleaf" draggable="true">
  54.         <div class="leaf-handle">item 2.1.1</div>
  55.       </div>
  56.     </div>
  57.   </div>
  58. </div>
  59. <div class="tree">
  60.   <div class="leaf" draggable="true">
  61.     <div class="leaf-handle">item 1</div>
  62.     <div class="leaf subleaf" draggable="true">
  63.       <div class="leaf-handle">item 1.1</div>
  64.       <div class="leaf subsubleaf" draggable="true">
  65.         <div class="leaf-handle">item 1.1.1</div>
  66.       </div>
  67.     </div>
  68.   </div>
  69.   <div class="leaf" draggable="true">
  70.     <div class="leaf-handle">item 2</div>
  71.     <div class="leaf subleaf" draggable="true">
  72.       <div class="leaf-handle">item 2.1</div>
  73.       <div class="leaf subsubleaf" draggable="true">
  74.         <div class="leaf-handle">item 2.1.1</div>
  75.       </div>
  76.     </div>
  77.   </div>
  78. </div>
  80. <!-- 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 -->

  1. document.addEventListener(&quot;dragstart&quot;, function (event) {
  2. document.querySelector(&quot;.tree&quot;).style.backgroundColor = &quot;transparent&quot;;
  3. event.target.style.background = &quot;transparent&quot;;
  4. setTimeout(() =&gt; {
  5. document.querySelector(&quot;.tree&quot;).style.backgroundColor = &quot;red&quot;;
  6. event.target.style.background = &quot;yellow&quot;;
  7. }, 100);
  8. });

<!-- language: lang-css -->

  1. .leaf {
  2. background-color: yellow;
  3. width: 200px;
  4. }
  5. .leaf-handle {
  6. background-color: green;
  7. border: 1px solid black;
  8. }
  9. .tree {
  10. background-color: red;
  11. display: flex;
  12. flex-direction: column;
  13. }
  14. .subleaf {
  15. padding-left: 30px;
  16. }
  17. .subsubleaf {
  18. margin-left: 60px;
  19. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;tree&quot;&gt;
  2. &lt;div class=&quot;leaf&quot; draggable=&quot;true&quot;&gt;
  3. &lt;div class=&quot;leaf-handle&quot;&gt;item 1&lt;/div&gt;
  4. &lt;div class=&quot;subleaf&quot;&gt;
  5. &lt;div class=&quot;leaf-handle&quot;&gt;item 1.1&lt;/div&gt;
  6. &lt;div class=&quot;subsubleaf&quot;&gt;
  7. &lt;div class=&quot;leaf-handle&quot;&gt;item 1.1.1&lt;/div&gt;
  8. &lt;/div&gt;
  9. &lt;/div&gt;
  10. &lt;/div&gt;
  11. &lt;div class=&quot;leaf&quot; draggable=&quot;true&quot;&gt;
  12. &lt;div class=&quot;leaf-handle&quot;&gt;item 2&lt;/div&gt;
  13. &lt;div class=&quot;leaf subleaf&quot; draggable=&quot;true&quot;&gt;
  14. &lt;div class=&quot;leaf-handle&quot;&gt;item 2.1&lt;/div&gt;
  15. &lt;div class=&quot;leaf subsubleaf&quot; draggable=&quot;true&quot;&gt;
  16. &lt;div class=&quot;leaf-handle&quot;&gt;item 2.1.1&lt;/div&gt;
  17. &lt;/div&gt;
  18. &lt;/div&gt;
  19. &lt;/div&gt;
  20. &lt;/div&gt;
  21. &lt;div class=&quot;tree&quot;&gt;
  22. &lt;div class=&quot;leaf&quot; draggable=&quot;true&quot;&gt;
  23. &lt;div class=&quot;leaf-handle&quot;&gt;item 1&lt;/div&gt;
  24. &lt;div class=&quot;leaf subleaf&quot; draggable=&quot;true&quot;&gt;
  25. &lt;div class=&quot;leaf-handle&quot;&gt;item 1.1&lt;/div&gt;
  26. &lt;div class=&quot;leaf subsubleaf&quot; draggable=&quot;true&quot;&gt;
  27. &lt;div class=&quot;leaf-handle&quot;&gt;item 1.1.1&lt;/div&gt;
  28. &lt;/div&gt;
  29. &lt;/div&gt;
  30. &lt;/div&gt;
  31. &lt;div class=&quot;leaf&quot; draggable=&quot;true&quot;&gt;
  32. &lt;div class=&quot;leaf-handle&quot;&gt;item 2&lt;/div&gt;
  33. &lt;div class=&quot;leaf subleaf&quot; draggable=&quot;true&quot;&gt;
  34. &lt;div class=&quot;leaf-handle&quot;&gt;item 2.1&lt;/div&gt;
  35. &lt;div class=&quot;leaf subsubleaf&quot; draggable=&quot;true&quot;&gt;
  36. &lt;div class=&quot;leaf-handle&quot;&gt;item 2.1.1&lt;/div&gt;
  37. &lt;/div&gt;
  38. &lt;/div&gt;
  39. &lt;/div&gt;
  40. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月4日 23:23:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/76401108.html
  • css
  • draggable
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定