JSFiddle - React, Tailwind, and code Playground

by AKotawala

HTML

<script src="&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css">
<html>

<body style="position:relative;">
    <form id="form1" runat="server">
        <div id="MainControl" class="demo" style="border:1px solid #000;height:200px;padding-left:20px;padding-top:25px;padding-right:20px;overflow:auto;position:relative;">
            <table id="tblMain1" runat="server" cellspacing="2" cellpadding="0" border="1">                       
                <tbody>
                    <tr id="tr_1">
                        <td id="tdAll_0_1">
                            <div id="dvCol1_1" style="width: 100px; height: 100px;" class="acHas1">
                                <div style="width: 450px;">Test DIV 1</div>
                            </div>
                        </td>
                        <td id="tdAll_1_1">
                            <div id="dvCol2_1" style="width: 100px; height: 100px; overflow-y: hidden; overflow-x: auto;" class="ac2">
                            </div>
                        </td>
                        <td id="tdAll_2_1">
                             <div id="dvCol3_1" style="width: 100px; height: 100px; overflow-y: hidden; overflow-x: auto;" class="ac2">
                             </div>
                        </td>
                    </tr>
                    <tr id="tr_2">
                        <td id="tdAll_0_2">
                            <div id="dvCol1_2" class="acHas3" style="width: 100px; height: 100px; overflow-y: hidden; overflow-x: auto;">
                                <div style="width: 450px;">Test DIV 2</div>
                            </div>
                        </td>
                        <td id="tdAll_1_2">
                             <div id="dvCol2_2" class="ac4"...

JavaScript

var strHasElements = '';
        function ProcessSortables()
        {
            var strSplitElements = strHasElements.split(',')

            var strClass=''
            var strClassToConnect1 = ''
            var strClassToConnect2 = ''
            var strClassNo = 0
            
            for(i=0;i<strSplitElements.length;i++)
            {
                //gets the CSS class of each element in array
                strClass = strSplitElements[i]               
                
                //If the cell has Test Divs then strClassNo will have some value.         
                strClassNo = (strClass.indexOf('acHas')>-1) ? parseInt(strClass.replace('acHas', '')) : ''
                
                strClass= '.' + strClass
                
                if(strClassNo!='')
                {                                
                    //This is required so that we don't want to change the order of the Test Divs when we reposition them
                    //from one cell to another
                    strClassToConnect1 = '.ac' + (strClassNo - 1)
                    strClassToConnect2 = '.ac' + (strClassNo + 1)    
                    
                    $(strClass).sortable({
                        connectWith: strClassToConnect1 + ',' + strClassToConnect2, // connects a particular cell for sort
                        cursor: 'crosshair',
                        scroll:true,
                        smooth:true,
                        snap:true,
                        tolerance: 'pointer',
                        zIndex: 999,            
                        start: function() { 
                        var currentClassID = $(this).attr('class')
                        var classNo = currentClassID.replace('acHas','')
                        classNo = classNo.split(' ')[0]                
                        var cA = parseInt(classNo)-1
                        var cB = parseInt(classNo)+1                       
                     ...