JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div id="tabs" class="ui-widget-content" style="border:none; background:none;">
   <ul style="padding: none; border: none;">
      <li><a href="#tabs-1">tab 1</a></li>
      <li><a href="#tabs-2">tab 2</a></li>
      <li><a href="#tabs-3">tab 3</a></li>
      <li><a href="#tabs-4">tab 4</a></li>
   </ul>
      <div id="tabs-1" style="padding:0px;">
        <ul id="sortable1" class="connectedSortable ui-helper-reset" style="min-width:100%;">
           <li id="liId"  class="ui-state-default">Tab 1 Text1</li>
           <li id="liId2"  class="ui-state-default">Tab 1 Text 2</li>
         </ul>
      </div>
      <div id="tabs-2" style="padding:0px;">
        <ul id="sortable2" class="connectedSortable ui-helper-reset" style="min-width:100%;">
           <li id="liId" style="position:relative; float:left; margin:5px;">Tab 2 Text 1</li>
           <li id="liId2" style="position:relative; float:left; margin:5px;">Tab 2 Text 2</li>
         </ul>
      </div>
      <div id="tabs-3" style="padding:0px;">
        <ul id="sortable3" class="connectedSortable ui-helper-reset" style="min-width:100%;">
           <li id="liId" style="position:relative; float:left; margin:5px;">Tab 3 Text 1</li>
           <li id="liId2" style="position:relative; float:left; margin:5px;">Tab 3 Text 2</li>
         </ul>
      </div>
      <div id="tabs-4" style="padding:0px;">
        <ul id="sortable4" class="connectedSortable ui-helper-reset" style="min-width:100%;">
           <li id="liId" style="position:relative; float:left; margin:5px;">Tab 4 Text 1</li>
           <li id="liId2" style="position:relative; float:left; margin:5px;">Tab 4 Text 2</li>
         </ul>
      </div>
</div>

JavaScript

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");

           ui.draggable.hide( "slow", function() {
               $tabs.tabs("select", $tab_items.index($item));
               $(this).appendTo( $list ).show( "slow" );
           });
         }
});
        
$("#sortable1","#sortable2","#sortable3","#sortable4").sortable({
         placeholder: "ui-state-highlight",
            delay: 250,
            opacity: ".7",
            revert: true,
            tolerance: "pointer",
            connectWith: ".connectedSortable",
            start: function (e, ui) { 
                //ui.placeholder.css("width", size_slider + 8);
                //ui.placeholder.css("height", size_slider * ".75" + 8);
                //ui.placeholder.css("background-color", "transparent");        
            },
    /*
            stop: function(event, ui) {
                $.ajax({
                    type: "POST",
                    url: "public/update_placement.php",
                    data: $(this).sortable("serialize")+"&user_id="+user_id,
                    success: function(data){ 
                        //alert("success");
                    },
                    error: function() {
                        alert("Failed");
                    }
                });    
            }
    */
        }).disableSelection();