JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<div class="wrapper">
    <ul class="column">

        <li id="folders" class="widget">
        
            <div class="widgetHeader"><span class="sprite">toggle</span>Widget 1</div>
            
            <div class="widgetBody"></div>
            
        </li>
        <li id="links" class="widget">
        
            <div class="widgetHeader"><span class="sprite">toggle</span>Widget 2</div>
            
            <div class="widgetBody"></div>
            
        </li>
       <li id="bugzilla" class="widget">
        
            <div class="widgetHeader"><span class="sprite">toggle</span>Widget 3</div>
            
            <div class="widgetBody"></div>
            
        </li>        
        
        
    </ul>

    <ul class="column">
        <li id="freshBrowsers" class="widget">
        
            <div class="widgetHeader"><span class="sprite">toggle</span>Widget 4</div>
            
            <div class="widgetBody"></div>
            
        </li>        

        
    </ul>

    <ul class="column">
        <li id="other1" class="widget">
        
           <div class="widgetHeader"><span class="sprite">toggle</span>Widget 5</div>
            
            <div class="widgetBody"></div>
            
        </li>
        <li id="other2" class="widget">
        
            <div class="widgetHeader"><span class="sprite">toggle</span>Widget 6</div>
            
            <div class="widgetBody"></div>
            
        </li>                    
    </ul>
</div>

CSS

.sprite{background:url(data:image/gif;base64,R0lGODlheQAOANU9AAAAAODg4P////v7+/z8/BISEh0dHf7+/t7e3gwMDPn5+ZycnJSUlP39/WpqaldXV4SEhEhISCcnJ+3t7T4+Pk1NTSEhIXNzc7S0tBgYGKWlpeHh4UVFRfLy8urq6uTk5C0tLRUVFRcXF1RUVDk5OTAwMA8PD6Ojo5+fnzw8PKurqygoKMTExJaWllxcXB4eHtHR0aioqIyMjOfn5+zs7ICAgLi4uPj4+CMjI66urlpaWmVlZfb29gAAAAAAAAAAACH5BAEAAD0ALAAAAAB5AA4AAAb/wB5gSCwaj4CeEFlUMpvLZzIqrVqvTax2y+16v2Cm4TgOm8/egHptDADc76NoUCtSBo4wiFRdw+FffmptcYWET4CGRQ8EMkMVAydGFgoClpcKEkgJCDMFiESDiV2jh0OliqFuq2+DRxEDCw8NDEgal5cYTC2WMUyof66tgGxFwKyrwqp+haKnTxQEBxBMBR+4ExlIHLgjSMCGrM/ExoLN4uCm6E8XBwM2TxG4OkgmG9ghR+DkxcPKpfye6Rs4TuARCA0crODB4skCSyqYoMBlKQdBQuRUpQp1cd1Fjq2aIWFAwMUQAx1gMOHk4dORFxQtEdCkDhnHgAY3BhOpz1xIMXSjcNyoUKQAjR1MSqRAw+wcMWH9Tvl0thON1atYs2rdynULlS5OqnxlMhZJ2K5ggwAAOw==)}
.wrapper{overflow:hidden; width:1000px}
.column {float:left;width: 300px;min-height:800px;background:#000;padding:10px 0 }

.widget{ margin: 10px auto;width: 95%;border: 1px solid #85C105;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px}
.widgetHeader{height: 25px;cursor: move; text-align: left;padding-left: 3px;color:#000;font-weight: bold;height: 30px; line-height: 30px;background:#8dc100;background-position:-294px 0}
.widgetHeader span{ float:left; height: 14px;margin: 8px 4px;text-indent: -9999em;width: 14px;background-position:-294px 0;cursor:pointer }

.widgetBody {min-height: 175px }

.ui-sortable-placeholder { border: 1px dashed #000; background:#888;visibility: visible !important }

/* colors */
.color-yellow {background:#f2bc00;}  
.color-red    {background:#dd0000;}  
.color-blue   {background:#148ea4;}  
.color-white  {background:#dfdfdf;}  
.color-orange {background:#f66e00;}  
.color-green  {background:#8dc100;}

JavaScript

var sortable = sortable || {
    orderChanged: false, //reordered?
    standardOrder: function(){
        //set standard order here for inits and resets        
    },
    fetchOrder: function() {
        if (localStorage.getItem('firstColumn')) {
            console.log('firstColumn - ' + localStorage.getItem('firstColumn'));
            console.log('secondColumn - ' + localStorage.getItem('secondColumn'));
            console.log('thirdColumn - ' + localStorage.getItem('thirdColumn'));
        }
        sortable.reOrder();
    },
    reOrder: function(){
        //set new order        
    },
    init: function() {
        $('ul.column').sortable({
            create: sortable.fetchOrder,
            connectWith: 'ul.column',
            handle: 'div.widgetHeader',
            opacity: 0.6,
            update: function(event, ui) {
                var $this = $(this),
                    pos = $this.sortable('toArray'),
                    index = $this.index(),
                    order = function(index) {
                        return ['first', 'second', 'third'][index];
                    };

                //console.log(order(index) + 'Column', pos);
                localStorage.setItem(order(index) + 'Column', pos);
            }
        }).disableSelection();

        $('div.widgetHeader span').on('click', function() {
            $(this).parent().next('div.widgetBody').toggle();
        });
    }
};

$(sortable.init);