JSFiddle - React, Tailwind, and code Playground

by swaroop206

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  
    <div id="container1" class="column-container">
        <div class="column">
            <div class="portlet">#container1 .column[0] .portlet[0]</div>
            <div class="portlet">#container1 .column[0] .portlet[1]</div>
            <div class="portlet">#container1 .column[0] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container1 .column[1] .portlet[0]</div>
            <div class="portlet">#container1 .column[1] .portlet[1]</div>
            <div class="portlet">#container1 .column[1] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container1 .column[2] .portlet[0]</div>
            <div class="portlet">#container1 .column[2] .portlet[1]</div>
            <div class="portlet">#container1 .column[2] .portlet[2]</div>
        </div>
    </div>
    <div style="clear:both"></div><br />
    <div id="container2" class="column-container">
        <div class="column">
            <div class="portlet">#container2 .column[0] .portlet[0]</div>
            <div class="portlet">#container2 .column[0] .portlet[1]</div>
            <div class="portlet">#container2 .column[0] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container2 .column[1] .portlet[0]</div>
            <div class="portlet">#container2 .column[1] .portlet[1]</div>
            <div class="portlet">#container2 .column[1] .portlet[2]</div>
        </div>
        <div class="column">
            <div class="portlet">#container2 .column[2] .portlet[0]</div>
            <div class="portlet">#container2 .column[2] .portlet[1]</div>
            <div class="portlet">#container2 .column[2] .portlet[2]</div>
        </div>
    </div>

CSS

.column-container { width: 100%; }
        .column-container .column { float: left; width: 100px; background: #ccc; margin-left: 10px; }
        .column-container .column .portlet { border: 1px solid black; padding: 2px; margin: 2px; }

JavaScript

//$( function() {
 //   $( "#sortable, #sortable1" ).sortable();
//    $( "#sortable, #sortable1" ).disableSelection();
//  } );

 $(function () {
            $('.column-container').sortable({items: '.portlet'});
        });
  

//$('.column-container').sortable({items: '.portlet'});