JSFiddle - React, Tailwind, and code Playground

by c3mdigital

HTML

<script src="http://desandro.com/demo/masonry/jquery.masonry.min.js"></script>
<input id="edit" type="button" value="Box Edit Mode" />
<input id="sort" type="button" value="Sort and Save" />    
<ul id="sortable1" class="sortable">
    <li class="ui-state-default double-triple"></li>
    <li class="ui-state-default single-single"></li>
    <li class="ui-state-default single-single"></li>
    <li class="ui-state-default double-single"></li>
    <li class="ui-state-default single-single"></li>
    <li class="ui-state-default double-single"></li>
    <li class="ui-state-default single-single"></li>
</ul>

CSS

.sortable {clear:both;}
.sortable:after {
    content: ''; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
ul {list-style:none;}
.ui-state-default {float:left; margin:6px;position:relative;min-height:125px;min-width:150px;background:rgba(0,0,0,.25);}
.single-single {width:150px; height:125px; } 
.single-double {width:150px; height:262px;}
.single-triple {width:150px; height:400px;} 

.double-single {width:312px; height:125px;}
.double-double {width:312px; height:262px;}
.double-triple {width:312px; height:400px;}
.placeholder {
    margin: 6px;
    border: 3px dashed #000;
    float:left;
    min-width:150px;
    min-height:125px;
    background:yellow;
}

JavaScript

$(document).ready(function() {
    $('#edit').click(function() {

        var itemList = $('.sortable');

        itemList.sortable({
            create: function(event, ui) {
                var plus = ui.item.hasClass('double-single') ? 'double-single' : 'single-single';
                itemList.sortable("option", "placeholder", 'placeholder ' + plus );
            }});
        itemList.sortable({
                    update: function(event, ui) {
                        $('#loading-animation').show(); // Show the animate loading gif while waiting
                        opts = {
                            url: MyAjax.ajaxurl,
                            // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
                            type: 'POST',
                            async: true,
                            cache: false,
                            dataType: 'json',
                            data: {
                                action: 'item_sort',
                                // Tell WordPress how to handle this ajax request
                                order: itemList.sortable('toArray').toString() // Passes ID's of list items in  1,3,2 format
                            },
                            success: function(response) {
                                $('#loading-animation').hide(); // Hide the loading animation
                                return;
                            },
                            error: function(xhr, textStatus, e) { // This can be expanded to provide more information
                                alert(e);
                                // alert('There was an error saving the updates');
                                $('#loading-animation').hide(); // Hide the loading animation
                                return;
                            }
                        };
                        $.ajax(opts);
                    }
                  });
          
      
   ...