JSFiddle - React, Tailwind, and code Playground

by neoniks

HTML

<html>

<head>
<title>test</title>
</head>

<body>
<div>
<table border="0" width="100%" id="modmenu">
        <tr>
            <td width="33%" style="padding: 5px">
            <ul id="t0" style="background-color: #FFFF00">
                <li id="el1" class="sys_blok column_blok"><span class="ui-icon-muve">X</span>123</li>
            </ul>
            </td>
            <td width="33%">&nbsp;</td>
            <td width="33%">&nbsp;</td>
        </tr>
        </table>
</div>

<div id="bod" style="">
<ul class="column" id="t1" style="padding: 5px; background-color: #FF00FF">
    <li id="el1" class="sys_blok column_blok"><span class="ui-icon-muve">X</span>123</li>
    <li class="sys_blok column_blok">
    <span class="ui-icon-muve">X</span><br/>
        <ul class="column" id="t2" style="float: left; width: 49%; background-color:#008000"></ul>
        <ul class="column" id="t3" style="float: left; width: 49%; background-color:#0000FF"></ul>
    </li>
    <li class="sys_blok column_blok"><span class="ui-icon-muve">X</span>123</li>
    <li class="sys_blok column_blok"><span class="ui-icon-muve">X</span>123</li>
</ul>
</div>

</body>

</html>

CSS

#modmenu ul,#modmenu li,#bod ul.column,#bod li.column_blok{list-style: none;display:block;margin:0;padding:5px 0;}
    #modmenu li .ui-icon-muve{display:none;}
    .column_blok{background-color:#999}
    .column{padding:0 5px;}

JavaScript

$(document).ready(function(){
    $( ".column" ).sortable({
            connectWith: ".column" ,
            cursor: 'crosshair',
            forceHelperSize: true,
            revert: true,
            forceHelperSize: true,
            dropOnEmpty: true,
            handle: '.ui-icon-muve'
    });
    $("#modmenu ul li.column_blok").draggable({
            connectToSortable:"ul.column",
            dropOnEmpty: true,
            helper: "clone",
            cursor:'point',
            appendTo: "#windowss"
        });

    $("ul.column").disableSelection();
});