JSFiddle - React, Tailwind, and code Playground

by Francis Rodrigues

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Sortable - Display as grid</title>
        <style type="text/css">
            #sortable {
                margin: 0; padding: 0; list-style-type: none;
            }
            #sortable li {
                float: left; margin: 3px 3px 3px 0; padding: 1px;
                width: 100px; height: 90px;
                font-size: 1em; text-align: center;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("#sortable").sortable();
                $(":button").click(function(){
                    $(this).parent().remove();
                    var arr = $("#sortable").sortable('toArray');
                    text = arr.toString();
                    alert(text);
                });
            });
        </script>
    </head>
    <body>
        <div class="demo">
            <ul id="sortable">
                <li id='1' class="ui-state-default">1<button> X </button></li>
                <li id='2' class="ui-state-default">2<button> X </button></li>
                <li id='3' class="ui-state-default">3<button> X </button></li>
                <li id='4' class="ui-state-default">4<button> X </button></li>
                <li id='5' class="ui-state-default">5<button> X </button></li>
                <li id='6' class="ui-state-default">6<button> X </button></li>
                
                <li id='7' class="ui-state-default">7<button> X </button></li>
                <li id='8' class="ui-state-default">8<button> X </button></li>
                <li id='9' class="ui-state-default">9<button> X </button></li>
                <li id='10' class="ui-state-default">10<button> X </button></li>
                <li id='11' class="ui-state-default">11<button> X </button></li>
                <li id='12' class="ui-state-default">12<button> X...