JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<ul id="droppables">
    <li>one <span class="handle">$</span></li>
    <li>two <span class="handle">$</span></li>
    <li>three <span class="handle">$</span></li>
    <li>four <span class="handle">$</span></li>
</ul>

JavaScript

$(document).ready(function() {

$('li').mouseover(function() {  $(this).attr('class', 'tabTdColorChange'); }
).mouseleave(function() {

    if (!$(this).hasClass('myselected')) {
        $(this).addClass('tabTdColorOriginal');
    }
});


    $('#droppables > li').draggable({ 
        //connectToSortable: "#tabTable"
        //,containment: "parent"
         handle: ".handle"
        ,revert:"invalid"
    }).click(function () {
    var $li_id = $(this).attr('id');

    $(this).addClass('myselected tabTdColorChange');
    $(this).siblings('.myselected').removeClass('myselected').addClass('tabTdColorOriginal');
    $('iframe[id*="' + $li_id + '"]').attr('class', 'contentframe');
    $('iframe:not([id*="' + $li_id + '"])').attr('class', 'contentframehide');
});
//$("#tabTable").sortable();