JSFiddle - React, Tailwind, and code Playground

by svierkant

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
    </ul>
    <div id="tabs-1">
        <ul id="sortable1" class="connectedSortable ui-helper-reset">
            <li class="ui-state-default" id="test1">Item 1</li>
            <li class="ui-state-default" id="test2">Item 2</li>
            <li class="ui-state-default" id="test3">Item 3</li>
            <li class="ui-state-default" id="test4">Item 4</li>
            <li class="ui-state-default" id="test5">Item 5</li>
        </ul>
    </div>
    <div id="tabs-2">
        <ul id="sortable2" class="connectedSortable ui-helper-reset">
            <li class="ui-state-highlight">Item 1</li>
            <li class="ui-state-highlight">Item 2</li>
            <li class="ui-state-highlight">Item 3</li>
            <li class="ui-state-highlight">Item 4</li>
            <li class="ui-state-highlight">Item 5</li>
        </ul>
    </div>
</div>

CSS

#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.0em; width: 120px; }

JavaScript

$( "#sortable1, #sortable2" ).sortable().disableSelection();

    var $tabs = $( "#tabs" ).tabs();

    var $tab_items = $( "ul:first li", $tabs ).droppable({
        accept: ".connectedSortable li",
        hoverClass: "ui-state-hover",
        drop: function( event, ui ) {
            var $item = $( this );
            var $list = $( $item.find( "a" ).attr( "href" ) )
                .find( ".connectedSortable" );
            
              
            console.log( ui.draggable.attr('id'));

            ui.draggable.hide( "slow", function() {
                $tabs.tabs( "select", $tab_items.index( $item ) );
                $( this ).appendTo( $list ).show( "slow" );
            });
        }
    });