JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test" class="list">
  <ul>
      <li><a id="Inbox">Inbox</a>
        <ul></ul>
      </li>
    <li><a id="Sent">Sent</a>
        <ul></ul>
      </li>
    <li><a id="Archive">Archive</a>
        <ul></ul>
      </li>
    <li><a id="Deleted">Deleted</a>
      <ul>
          <li><a id="Subfolder1">Sub Folder 1</a></li>
        </ul>
     </li>
  </ul>
</div>

CSS

.list li {
    cursor:pointer;
    font-family:verdana;
    font-size:9pt;
}
.list li ul {
    height:25px;
}
.droppable-hover {
    height:10px;
    background-color:#CCF3FF;
}

JavaScript

$(document).ready(function () {
                $('#test li').draggable({
                    revert: "invalid",
                    containment: "document",
                    helper: function(event){
                      var showTooltip  = $('<div class="draggable-tooltip"/>').text($(this).text());
                      return showTooltip;
                     },
                    cursor: 'move',
                    
                });

                $("#test li ").droppable({
                    hoverClass: "ui-state-active",
                    activeClass: "ui-state-highlight",
                    over: function (event, ui) {
                        var sourceFolder = $(ui.draggable).parent("ul").parent('li').find('a').attr('id');
            var folderName = $(event.target).find('a').attr('id');
            var targetFolder = $(event.target).find('a').attr('id');
            

            console.log("source over an element........."+sourceFolder+":::folderNmae::;"+folderName+"::target folder::"+targetFolder);
            $(ui.helper).text("Move to " + folderName);
                    }
                });
            });