JSFiddle - React, Tailwind, and code Playground

by cm0s

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
<div class="demo">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a>
            </li>
            <li><a href="#tabs-2">Proin dolor</a>
            </li>
            <li><a href="#tabs-3">Proin dolor</a>
            </li>
        </ul>
        <div id="tabs-1">
            <ul id="sortable1" class="connectedSortable ui-helper-reset">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
            </ul>
            <ul id="sortable2" class="connectedSortable ui-helper-reset">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
            </ul>
        </div>
        <div id="tabs-2">
            <ul id="sortable3" class="connectedSortable ui-helper-reset">
                <li class="ui-state-highlight">Item 1</li>
                <li class="ui-state-highlight">Item 2</li>
            </ul>
            <ul id="sortable4" class="connectedSortable ui-helper-reset">
                <li class="ui-state-highlight">Item 1</li>
                <li class="ui-state-highlight">Item 2</li>
            </ul>
        </div>
        <div id="tabs-3">
            <ul id="sortable5" class="connectedSortable ui-helper-reset" style="float:left">
                <li class="ui-state-highlight">Item 1</li>
                <li class="ui-state-highlight">Item 2</li>
            </ul>
            <ul id="sortable6" class="connectedSortable ui-helper-reset" style="float:left">
                <li class="ui-state-highlight">Item 1</li>
                <li class="ui-state-highlight">Item 2</li>
            </ul>
            <ul id="sortable7" class="connectedSortable ui-helper-reset" style="float:left">
                <li class="ui-state-highlight">Item 1</li>
                <li class="ui-state-highlight">Item 2</li>
    ...

CSS

#sortable1 li, #sortable2 li, #sortable3 li, #sortable4 li, #sortable5 li, #sortable6 li, #sortable7 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

JavaScript

$(function () {
    $("#tabs").tabs().find(".ui-tabs-nav").sortable({
        axis: "x"
    });
});

$(function () {
    $("#sortable1, #sortable2, #sortable3, #sortable4, #sortable5, #sortable6, #sortable7").sortable({
        connectWith: ".connectedSortable"
    }).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");
            ui.draggable.hide("slow", function () {
                $(this).appendTo($list).show("slow");
            });
        }
    });
});