JSFiddle - React, Tailwind, and code Playground

Tree_11

by Dave

HTML

<div style="">Full 01</div>
<ul class='qqq' id="myUL" oncontextmenu="return false;">
  <li id='gfdsg'><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) {
//alert(e.target.classList) 
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.tagName.toLowerCase()=="span" || e.target.parentElement.tagName.toLowerCase()=="li"||e.target) {
 //if (e.target.classList.contains('caret') || e.target.tagName.toLowerCase()=="a") {
   //alert(e.target.classList) 
   e.target.onmouseup = (function(d) {
   ////e.target
    if (!d.target.parentElement.parentElement.classList.contains("anexjs_tree_context") && document.querySelector('.anexjs_tree_context')){ //remove context menu on click
    //alert(d.target.parentElement.parentElement.classList) 
    var ratc = document.querySelector(".anexjs_tree_context").remove(ratc)
    }    
    //alert(d.target.classList) 
    
    
    /* Move to onmousedown 
    if (d.target.parentElement.tagName.toLowerCase()=="li") {
    //d.target.parentElement.style.pointerevents = "none";
     //i.style.left = left+ "px";
    //d.target.parentElement.style.pointerevents = "none";//pointer-events:none;
    d.target.parentElement.setAttribute("draggable","true");
    d.target.parentElement.setAttribute("ondragstart","drag(event)");
    //d.target.parentElement.setAttribute('style', 'pointerevents:none');
    }
    d.target.onmouseleave = (function() {
    this.parentElement.removeAttribute('draggable');
    this.parentElement.removeAttribute('ondragstart');
    //this.setAttribute("draggable","false");
    });
    */
    
    
    if (d.button === 0 && d.target.classList.contains('caret')) { //left click actions
    
    
   ...