JSFiddle - React, Tailwind, and code Playground

Tree_12

by Dave

HTML

<div style="">Full 02</div>
<ul id="myUL" oncontextmenu="return false;"><!---->
  <li><span ondrop="drop(event)" ondragover="allowDrop(event)" id="myUL_topLEV" class="caret">Beveys</span>
    <ul class="nested">
      <li><a>Water</a></li>
      <li><a>Coffee</a></li>
      <li><span ondrop="drop(event)" ondragover="allowDrop(event)" class="caret">Tea</span>
        <ul class="nested">
        <li><a>Black Tea</a></li>
          <li><a>White Tea</a></li>
          <li><span ondrop="drop(event)" ondragover="allowDrop(event)" class="caret">Green Tea</span>
            <ul class="nested">
              
              <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{
/* cursor: default; */
display: block;
}


#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() {

    var del_obj = document.getElementById('myUL').querySelector(".del_obj");
    if (del_obj){
    del_obj.removeAttribute('draggable');
    del_obj.removeAttribute('ondragstart');
    del_obj.removeAttribute('class');
    }
    


if (this.querySelector(".anexjs_tree_context")){ //remove context menu on mouseleave
this.querySelector(".anexjs_tree_context").remove()
}

});
 
    e.target.onmousedown = (function(p) {
    
    if(p.target.parentElement.parentElement.className !== "anexjs_tree_context" ){//ccx_c
    
    if (document.getElementById('myUL').querySelector(".anexjs_tree_context")){ //remove context menu on mouseleave
    document.getElementById('myUL').querySelector(".anexjs_tree_context").remove()
    }
    
    if (p.target.parentElement.tagName.toLowerCase()=="li") {
    p.target.parentElement.setAttribute("draggable","true");
    p.target.parentElement.setAttribute("ondragstart","drag(event)");
    p.target.parentElement.classList.add("del_obj");
    }
    
    }
    
    });

    
    e.target.onmouseup = (function(d) {
    
    var del_obj = document.getElementById('myUL').querySelector(".del_obj")
    
    if (del_obj){
    del_obj.removeAttribute('draggable');
    del_obj.removeAttribute('ondragstart');
    del_obj.removeAttribute('class');
    }//d.stopPropagation()
    
    
    //remove context menu on click
    if (!d.target.parentElement.parentElement.classList.contains("anexjs_tree_context") && document.querySelector('.anexjs_tree_context')){
    document.querySelector(".anexjs_tree_context").remove()
    }    
    
    if (d.button === 0 && d.target.classList.contains('caret')) { //left click actions
    
   ...