JSFiddle - React, Tailwind, and code Playground

by neoniks

HTML

<html>

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

<body>

<div>
<table border="1" width="100%" id="modmenu">
        <tr>
            <td width="33%">
            <ul id="t0">
                <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="border: 1px solid #000000">
<ul class="column" id="t1">
<li id="el1" class="sys_blok column_blok"><span class="ui-icon-muve">X</span>123</li>
<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>
<table border="1" width="100%">
    <tr>
        <td  width="50%" style="min-height: 50px"><ul class="column" id="t2"></ul></td>
        <td  width="50%" style="min-height: 50px"><ul class="column" id="t3"></ul></td>
    </tr>
</table></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;}

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();
});