JSFiddle - React, Tailwind, and code Playground

by Petr Haluza

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/mint-choc/jquery-ui.css">
<div id="maincontainer">
    <div id="contentwrapper">
        <div id="maincolumn">
            <div class="text">
                <div class="listBlock">
                    <h2>Lidi</h2>
                    <ul id="sortable1" class='droptrue'>
<li id="hid1">Adam Werner	</li>
<li id="hid2">Čičatka Ladislav	</li>
<li id="hid3">David Havel	</li>
<li id="hid4">Dolezal	</li>
<li id="hid5">Douděrová Helena	</li>
<li id="hid6">Gazda	</li>
<li id="hid7">Hořicová Dana	</li>
<li id="hid8">Hráček Lukáš	</li>
<li id="hid9">Hrdlicka	</li>
<li id="hid10">Jan Hořice	</li>
<li id="hid11">Jan Kolář	</li>
<li id="hid12">Jana Plecháčová	</li>
<li id="hid13">Jiří Kníže	</li>
<li id="hid14">Jonáš Vlček	</li>
<li id="hid15">Josef Marval	</li>
<li id="hid16">Kočvárková Barb	</li>
<li id="hid17">Lukáš Střeštík	</li>
<li id="hid18">Malý František	</li>
<li id="hid19">Martin Kuk	</li>
<li id="hid20">Merta David	</li>
<li id="hid21">Michal Štěpánek	</li>
<li id="hid22">Míša Kratochvílová	</li>
<li id="hid23">Otčenášek Jirka	</li>
<li id="hid24">Petr Novák	</li>
<li id="hid25">Petr Winzberger	</li>
<li id="hid26">Petrovič David	</li>
<li id="hid27">Piňosová Nicola	</li>
<li id="hid28">Rampulová Katka	</li>
<li id="hid29">Richard Hemzal	</li>
<li id="hid30">Simandl Martin	</li>
<li id="hid31">Skalický Michal	</li>
<li id="hid32">Skořepa Aleš	</li>
<li id="hid33">Šedivý Jaroslav	</li>
<li id="hid34">Tomáš Trubl	</li>
<li id="hid35">Tomáš Veselý	</li>
<li id="hid36">Václav Tischler	</li>
<li id="hid37">Vaculík Jiří	</li>
<li id="hid38">Vlašicová Vendula	</li>
<li id="hid39">Vyhnalík Michal	</li>
<li id="hid40">Zdražilová Martina	</li>                       
                    </ul>
                </div>

            </div>

<div class="text">
                <div class="listBlock">
                    <h2>Dráha 1 (20:00)</h2>
                    <ul id="sortable2"...

CSS

.listBlock {    float: left;}
#contentwrapper {padding:2em; }
#maincolumn { display:flex;}
#sortable1, #sortable2, #sortable3, #sortable4, #sortable5,
#sortable6, #sortable7, #sortable8, #sortable9{
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-right: 100px;
    background: #eee;
    padding: 5px;
    width: 200px;
    border: 1px solid black;
    min-height:2em;}
#sortable1 li, #sortable2 li, #sortable3 li, #sortable4 li, #sortable5 li,
#sortable6 li, #sortable7 li, #sortable8 li, #sortable9 li{
    color:black;
    cursor: move;
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: calc(100% - 20px);
    background: none;
    background-color: white;}
#sortable1 { width:380px; column-count:2;}
.selected {    background:red !important;}
.hidden {   display:none !important;}
ul {    list-style-type: none;}
.text { display: flex;  flex-direction: column;}

JavaScript

$(function () {
    $('.droptrue').on('click', 'li', function () {
        $(this).toggleClass('selected');
    });

    $("ul.droptrue").sortable({
        connectWith: 'ul.droptrue',
        opacity: 0.6,
        revert: true,
        helper: function (e, item) {
            console.log('parent-helper');
            console.log(item);
            if(!item.hasClass('selected'))
               item.addClass('selected');
            var elements = $('.selected').not('.ui-sortable-placeholder').clone();
            var helper = $('<ul/>');
            item.siblings('.selected').addClass('hidden');
            return helper.append(elements);
        },
        start: function (e, ui) {
            var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
            ui.item.data('items', elements);
        },
        receive: function (e, ui) {
            ui.item.before(ui.item.data('items'));
        },
        stop: function (e, ui) {
            ui.item.siblings('.selected').removeClass('hidden');
            $('.selected').removeClass('selected');
        },
        update: updatePostOrder
    });

    $("#sortable1, #sortable2, #sortable3, #sortable4, #sortable5").disableSelection();
    updatePostOrder();
});

function updatePostOrder() {
    var arr = [];
    $("#sortable2 li,#sortable3 li, #sortable4 li, #sortable5 li").each(function () {
        arr.push($(this).attr('id'));
    });
    $('#postOrder').val(arr.join(','));
}