JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<script src="https://rawgit.com/isocra/TableDnD/master/js/jquery.tablednd.js"></script>
<body>

        <div class="tableDemo">
            <table id="table-4" cellspacing="0" cellpadding="2">
                <thead>
                    <tr id="4.0" class="nodrop nodrag">
                        <th>H1</th>
                        <th>H2</th>
                        <th>H3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="4.1">
                        <td>4.1</td>
                        <td>One</td>
                        <td>
                            <input type="text" name="one" value="one">
                        </td>
                    </tr>
                    <tr id="4.2">
                        <td>4.2</td>
                        <td>Two</td>
                        <td>
                            <input type="text" name="two" value="two">
                        </td>
                    </tr>
                    <tr id="4.3">
                        <td>4.3</td>
                        <td>Three</td>
                        <td>
                            <input type="text" name="three" value="three">
                        </td>
                    </tr>
                    <tr id="4.4">
                        <td>4.4</td>
                        <td>Four</td>
                        <td>
                            <input type="text" name="four" value="four">
                        </td>
                    </tr>
                    <tr id="4.5">
                        <td>4.5</td>
                        <td>Five</td>
                        <td>
                            <input type="text" name="five" value="five">
                        </td>
                    </tr>
                    <tr id="4.6">
                        <td>4.6</td>
                        <td>Six</td>
                        <td>
                            <input type="text" name="six" value="six">
 ...

CSS

body {
    color:#333333;
    font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-size: 80%;
    margin: 1em;
    background-color: #F0F0F0;
    line-height: 1.4em;
}
p {
    padding: 10px;
    width: 60%;
}
h1 {
    color: #114477;
}
pre.prettyprint {
    margin-bottom: 20px;
    padding-top: 15px;
}
.prettyprint {
    background-color: #F7F7F9;
}
code, pre {
    display: block;
    margin: 0 0 10px;
    line-height: 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
pre {
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    font-weight:normal;
}
pre, code {
    color:#264A94;
    font-family:Monaco, Lucida Console, monospace;
    font-size:90%;
}
div#page {
    background-color: white;
    padding: 1em;
}
.tableDemo {
    background-color: white;
    border: 1px solid #666699;
    margin-right: 10px;
    padding: 6px;
}
.tableDemo table {
    border: 1px solid silver;
}
.tableDemo td {
    padding: 2px 6px
}
.tableDemo th {
    color: white;
    text-shadow: 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A;
    border-bottom: 8px double #29215A;
    padding: 10px;
}
#table-2 th {
    background-color: #29215A;
    color: white;
}
#table-2 td, th {
    padding-right: 8px;
}
.category td {
    background-color: #E4EBF3;
}
table {
    /*position: relative;*/
    border-collapse: separate;
    border-spacing: 0;
}
tr {
    /*position: relative;*/
    /*display: block;*/
}
.tDnD_whileDrag {
   ...

JavaScript

function inline_sprintlist_ondrop(table, row) {
    var result = $(table).parent().find('.result'),
        pre = $('<pre class="prettyprint">');
    result.html(pre.text($.tableDnD.jsonize(true)));
    prettyPrint();
    //            pre.text($(table).tableDnD.jsonize())
    //        return true;
    //// '<div class="indent">&nbsp;</div>',
}

$(document).ready(function () {
    // Initialise the first table (as before)
    $("#table-1").tableDnD();
    // Make a nice striped effect on the table
    table_2 = $("#table-2");
    table_2.find("tr:even").addClass("alt");
    // Initialise the second table specifying a dragClass and an onDrop function that will display an alert
    table_2.tableDnD({
        onDragClass: "myDragClass",
        onDrop: function (table, row) {
            var rows = table.tBodies[0].rows;
            var debugStr = "Row dropped was " + row.id + ". New order: ";
            for (var i = 0; i < rows.length; i++) {
                debugStr += rows[i].id + " ";
            }
            $(table).parent().find('.result').text(debugStr);
        },
        onDragStart: function (table, row) {
            $(table).parent().find('.result').text("Started dragging row " + row.id);
        }
    });
    $('#table-3').tableDnD({
        onDragStart: function (table, row) {
            $(table).parent().find('.result').text('');
        },
        onDrop: function (table, row) {
            $('#AjaxResult').load("server/ajaxTest.php?" + $.tableDnD.serialize())
                .parent().find('.result').html($('<p>').append('Result of $.tableDnD.serialize() is url encoded: ')
                .append($('<pre class="prettyprint">').text($.tableDnD.serialize()))
                .append(' Which looks like this when decoded (decodeURI): ')
                .append($('<pre class="prettyprint">').text(decodeURI($.tableDnD.serialize()))));
        }
    });
    $('#table-4').tableDnD(); // no options currently
    $('#table-5').tableDnD({
       ...