JSFiddle - React, Tailwind, and code Playground

by dvanauken

HTML

<div id="tabsOptions">
    <ul class="options tabsOptions">
        <li>TEMP1</li>
        <li>TEMP2</li>
        <li>TEMP3</li>
        <li>TEMP4</li>
    </ul>
</div>
<br />
<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
    </ul>
    <div id="tab1">
        <p class="components connectedComponents">sodfm</p>
    </div>
</div>

CSS

.options {
    cursor: default;
    list-style-type: none;
    width: 310px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.options li {
    cursor: pointer;
    list-style: none;
    border: 1px solid #CCC;
    background: #F6F6F6;
    color: #ff6a00;
    margin: 5px;
    padding: 5px;
    height: 22px;
}
.components {
    cursor: default;
    list-style-type: none;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: -40px;
}
.components li {
    cursor: pointer;
    list-style: none;
    border: 1px solid #CCC;
    background: #F6F6F6;
    color: #1C94C4;
    margin: 5px;
    padding: 5px;
    height: 22px;
}
li.highlight {
    background: #FEE25F;
}
li.components-placeholder {
    border: 1px dashed #CCC;
    background: none;
}

JavaScript

$(document).ready(function () {
    var tabs = $("#tabs").tabs();
    tabs.find(".ui-tabs-nav").sortable({
        axis: "x",
        stop: function () {
            tabs.tabs("refresh");
        }
    });

    $('.components, .componentOptions').sortable({
        revert: true,
        connectWith: '.connectedComponents'
    });

    $('.options').sortable({
        revert: true
    });


    $('#tabs').droppable({
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            var num_tabs = $("div#tabs ul li").length + 1;

            $("div#tabs ul").append("<li><a href='#tab" + num_tabs + "'>" +ui.draggable.text() + "</a></li>");
            $("div#tabs").append("<div id='tab" + num_tabs + "'>"  +num_tabs+  "</div>");
            $("div#tabs").tabs("refresh");
            $(ui.draggable).remove()
        }
    });

});