JSFiddle - React, Tailwind, and code Playground

by doonot

HTML

<div id="treeview">
  <ul id='browser' class='filetree'>
    <li class='closed'><span  class='folder' id='1'>module 1</span>
        <ul>
            <li class='closed'><span  class='folder' id='4'>submodule 1</span></li>
            <li><span class='file' id='5'>item 1</span></li>
        </ul>
    </li>
      
    <li class='closed'><span  class='folder' id='2'>module 2</span></li>
    <li class='closed'><span  class='folder' id='3'>module 3</span></li>
  </ul>
</div>

CSS

/* jQuery right click menu CSS*/
        .vmenu{
            border:1px solid #aaa;
            position:absolute;
            background:#fff;    
            display:none;
            font-size:0.9em;
        }
           .vmenu .first_li span{
               width:200px;
               display:block;
               padding:5px 10px;
               cursor:pointer;
           }
           .vmenu .inner_li{
               display:none;
               margin-left:120px;
               position:absolute;
               border:1px solid #aaa;
            border-left:1px solid #ccc;
            margin-top:-28px;
            background:#fff;
        }
           .vmenu .sep_li{
               border-top: 1px ridge #aaa;
               margin:5px 0;
           }
           .vmenu .fill_title{
               font-size:11px;
               font-weight:bold;
               height:15px;
               overflow:hidden;
               word-wrap:break-word;
           }

JavaScript

$(document).ready(function() {
    
    $('li span.folder').mousedown(function(event) {
                  switch (event.which) {
                      case 1:
                          console.log('Left mouse button pressed');
                          break;
                      case 2:
                          console.log('Middle mouse button pressed');
                          break;
                      case 3:
                          console.log('right click event');
                          var rightClickID = $(this).attr('id');
                          var parentID = $(this).closest("li").attr('id'); 

                          console.log("setting parent id to: " + parentID);
                          console.log('setting sub module id to: ' + rightClickID);
                          break;
                      default:
                          console.log('You have a strange mouse');
                  }
              });    
});