JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<div id="row-container" class="outter-container">
    <ul id="list1" class="row sort-row drop-container inner-container">
        <li id='bold' class='draggable row1 wp'>1.1
        </li>
        <li id='italic' class='draggable row1 wp'>1.2
        </li>
        <li id='strikethrough' class='draggable row1 wp'>1.3
        </li>
        <li id='bullist' class='draggable row1 wp'>1.4
        </li>
        <li id='numlist' class='draggable row1 wp'>1.5
        </li>
        <li id='blockquote' class='draggable row1 wp'>1.6
        </li>
        <li id='justifyleft' class='draggable row1 wp'>1.7
        </li>
        <li id='justifycenter' class='draggable row1 wp'>1.8
        </li>
        <li id='justifyright' class='draggable row1 wp'>1.9
        </li>
        <li id='link' class='draggable row1 wp'>1.10
        </li>
        <li id='unlink' class='draggable row1 wp'>1.11
        </li>
        <li id='wp_more' class='draggable row1 wp'>1.12
        </li>
        <li id='spellchecker' class='draggable row1 wp'>1.13
        </li>
        <li id='fullscreen' class='draggable row1 wp'>1.14
        </li>
        <li id='wp_adv' class='draggable row1 wp'>1.15
        </li>
    </ul>
    <ul id="list2" class="row sort-row drop-container inner-container" >
        <li id='formatselect' class='draggable row2 wp'>2.1
        </li>
        <li id='underline' class='draggable row2 wp'>2.2
        </li>
        <li id='justifyfull' class='draggable row2 wp'>2.3
        </li>
        <li id='forecolorpicker' class='draggable row2 wp'>2.4
        </li>
        <li id='pastetext' class='draggable row2 wp'>2.5
        </li>
        <li id='pasteword' class='draggable row2 wp'>2.6
        </li>
        <li id='removeformat' class='draggable row2 wp'>2.7
        </li>
        <li id='charmap' class='draggable row2 wp'>2.8
        </li>
        <li id='outdent' class='draggable row2 wp'>2.9
        </li>
        <li id='indent' class='draggable row2 wp'>2.10
        </li>
       ...

CSS

ul, .settings{
    display:block;
    float:left;
    margin-right:30px;
}
.clear{
    clear:both;
}
p{
    margin:20px 0;
}

JavaScript

// Save settings
function saveSort() {
    var ddOpt = [];
    var ddOptS = [];
    var ddSet = [];
    $(".ui-sortable").each(function() {
        var contId = $(this).attr("id");
        ddOpt[contId] = $("#" + contId).sortable("toArray").join();
    });
    $("input:checked").each(function() {
        ddSet.push($(this).attr("id"));
    });
    ddOpt["ddset"] = ddSet.join();
    console.log(ddOpt);
}

// Initialize sortables
$(function() {
    $("ul").sortable({
        appendTo: "ul",
        cancel: ".place-icons",
        connectWith: "ul",
        update: function(event, ui) {
            saveSort();
        }
    });
});

$(window).load(function() {
    saveSort();
});