JSFiddle - React, Tailwind, and code Playground

Tree_10

by Dave

HTML

<div style="">Full 01</div>
<ul class='qqq' id="myUL" oncontextmenu="return false;">
  <li><span id="myUL_topLEV" class="caret">Beveys</span>
    <ul class="nested">
      <li><a>Water</a></li>
      <li><a>Coffee</a></li>
      <li><span class="caret">Tea</span>
        <ul class="nested">
        <li><a>Black Tea</a></li>
          <li><a>White Tea</a></li>
          <li><span class="caret">Green Tea</span>
            <ul class="nested">
              <li><a>Sencha</a></li>
              <li><a>Gyokuro</a></li>
              <li><a>Matcha</a></li>
              <li><a>Pi Lo Chun</a></li>
            </ul>
          </li>
        </ul>
      </li>  
    </ul>
  </li>
</ul>
dfg

CSS

.anexjs_tree_context {
  position: absolute;
  cursor: default;
  color: rgb(000, 000, 000);
}
.anexjs_tree_context .ccx_a,
.anexjs_tree_context .ccx_b{
  /* background-color: rgb(153, 221, 255); */
display: inline-block;
vertical-align: top;
background-color: rgb(211, 211, 211);
padding: 5px;
}

.anexjs_tree_context .ccx_a div:hover,
.anexjs_tree_context .ccx_b div:hover{
background-color: rgb(153, 221, 255);
}

.anexjs_tree_context .ccx_b{
display: none;
}

.anexjs_tree_context .ccx_a .ccx_c::after {
/* .anexjs_tree_context .ccx_a div::after { */
  content: "\00a0\00a0\27A7"; /* 25B6 */
}

ul, #myUL {
  list-style-type: none;
  padding-left: 10px;
  display: inline-block;
 }

#myUL span,
#myUL a{
display: block;
/* cursor: default; */
}

#myUL a::before{
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABaUlEQVR4Xo2Ru0ozQRiG35lsDipIPBCsFAQbO9MEtPIevAG7aG2nhaBFxMKL8AL+6gcLGxsPYCcELEUCIUYkCXuY2Zn51N0MaHaMPtU7fDMP78cwDKlfdhQDfCIADLCDfI4xnvN40WOdk/XyMkawAmz/b9HpZgUujq5fYfIFMVUyz43a/Aq+4NlAWiVhbsLDKDMFYH+jXNy77VaO79rNg9rCqp1xG6IohjL4BiGlNwgxEBqH1dlpqWiycdN+yDSIRAwyxrnf/dMbdv8FSe76aqm6WM6uIISEoZEGw/NVfQ2WvlDYOm/C1cC+sNjfyFCAdjWIYUCZFSz0NRvjaCAllE4FyhBceJwhkBqhkO4VImUgDCHWPwgIiDQlbbOC6FNAiDQbJ0jvOAVCpkM1pgFH2tIlEDJdIdL0ewPpbBCDGAMYBxjccJ7cES6BH0o8tnrwhYbSxinJcYaXfoQgdAgQCOycXeBPlPLGxnfDEM7p1dI2cAAAAABJRU5ErkJggg==');
}
    
#myUL a:hover, 
#myUL span:hover{
   background-color: rgb(153, 221, 255);
}


#myUL {
  /* position: absolute; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  border: 1px solid;
  display: inline-block;
  overflow: auto;
  width: 100px;
  height: 100vh;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

/*
.caret {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
*/

.caret::before {
  content:...

JavaScript

//rename dialog
//drag drop
//sort
//https://www.w3schools.com/jsref/obj_dragevent.asp
//https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

window.onload = function() {


document.getElementById("myUL").addEventListener("mouseover", function(e) {

this.onmouseleave = (function(p) {

if (document.querySelector(".anexjs_tree_context")){ //remove context menu on mouseleave
var ratc = document.querySelector(".anexjs_tree_context").remove(ratc)
}

});
 
 if (e.target.classList.contains('caret')) {
 

   this.onmousedown = (function(d) {
  
    if (!d.target.parentElement.parentElement.classList.contains("anexjs_tree_context") && document.querySelector('.anexjs_tree_context')){ //remove context menu on click
    var ratc = document.querySelector(".anexjs_tree_context").remove(ratc)
    }
    
    
    if (d.button === 0 && d.target.classList.contains('caret')) { //left click actions
     e.target.parentElement.querySelector(".nested").classList.toggle("active");
     e.target.classList.toggle("caret-down");
    }
     
     //&& !document.querySelector(".anexjs_tree_context")
     
    if (d.button === 2 && !d.target.parentElement.parentElement.classList.contains("anexjs_tree_context")) { //right click actions
    
     if (d.target.classList.contains('caret')) { 
     //alert(d.target.parentElement.outerHTML)
     var y = d.target.parentElement;
     ppp(d,y)
     }
     
     if (d.target.classList.length===0) { 
     //alert(d.target.outerHTML)
     var y = d.target.parentElement.parentElement;
     ppp(d,y)
     }
     
    }


   });
  }
 })

////////////////////////////////////////
};//finish window.onload = function()
////////////////////////////////////////
function ppp(y,z){
  //alert('m')
  var i, left = y.clientX, top = y.clientY;
  i = document.createElement('div');
  i.setAttribute("oncontextmenu", "return false");
  i.className="anexjs_tree_context";
  i.style.left = left+ "px";
  i.style.top = top+ "px";
  //i.onmouseleave =...