JSFiddle - React, Tailwind, and code Playground

by SkeLLLa

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js"></script>
<ul id="items">
    <li class="item">
        <span>Item 1</span>
    </li>
    <li class="item">
        <span>Item 2</span>
    </li>
    <li class="item">
        <span>Item 3</span>
    </li>
    <li class="item">
        <span>Item 4</span>
    </li>
    <li class="item">
        <span>Item 5</span>
    </li>
    <li class="item">
        <span>Item 6</span>
    </li>
</ul>

<ul id="cart">
    <li>blabla</li>
</ul>

CSS

#items
{
    float: left;
    width: 150px;
    border: 1px solid #f9f9f9;
}
 
#cart
{
    float: right;
    width: 150px;
    background-color: #fff;
    border: 1px solid #f9f9f9;
    padding-bottom: 50px;
}
 
#cart .info
{
    color: #444;
    font-size: 0.9em;
    text-align: center;
    font-weight: bold;
 
}
 
.item {
    float: left;
    position: relative;
    width: 150px;
    height: 50px;
    border: 1px solid #eee;
    margin: 10px;
    border-right: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
    background-color: #fff;
    background-position: left top;
    background-repeat: no-repeat;
    cursor: move;
}
#cart .item {
    width: 150px;
    height: 50px;
    margin: 5px;
    background-position: -40px -22px;
    border-width: 1px;
    cursor: default;
}
 
.item span
{
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 0.8em;
    font-weight: bold;
    width: 100%;
    text-align: center;
 
}

JavaScript

$(document).ready(function () {
    $('#items').sortable({
        connectWith: '#items',
        handle: '.item',
        cursor: 'move',
        placeholder: 'placeholder',
        forcePlaceholderSize: true,
        opacity: 0.4,
        stop: function(event, ui){
            $(ui.item).find('h2').click();
            var sortorder='';
            $('.column').each(function(){
                var itemorder=$(this).sortable('toArray');
                var columnId=$(this).attr('id');
                sortorder+=columnId+'='+itemorder.toString()+'&';
            });
            alert('SortOrder: '+sortorder);
            /*Pass sortorder variable to server using ajax to save state*/
        }
    })
    .disableSelection();
});