JSFiddle - React, Tailwind, and code Playground

by Denis Howlett

HTML

<script src="https://rawgit.com/isocra/TableDnD/master/js/jquery.tablednd.js"></script>
<body>
    <div id="page">
        	<h1>
				Table Drag and Drop jQuery plugin
			</h1>

        <p>This page contains documentation and tests for the TableDnD jQuery plug-in. For more information and to post comments, please go to <a href="http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/">isocra.com</a>.</p>
        <p>If you have issues or bug reports, then you can post them at the <a href="http://plugins.jquery.com/project/issues/TableDnD">TableDnD plug page</a> at plugins.jquery.com</p>
        	<h2>
				How do I use it?
			</h2>

        <ol>
            <li>Since TableDnD is a jquery pligin you will need to include jquery in your page first.
                <p>No need for any downloads simply reference <a href="https://developers.google.com/speed/libraries/devguide#jquery">jQuery from the Google CDN</a> (Content Distribution Network) At the time of this writing the latest release was 1.8.2. All scripts are included at the bottom of the page, to facilitate quicker rendering of the HTML for more responsive pages. The following is the way we are linking to jQuery in the examples and this method can be recommended for use in your implementations too.</p>	<pre class="prettyprint">
&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
</pre>

            </li>
            <li>We will also need a copy of the <a href="/articles/jquery.tablednd.js.zip">TableDnD plugin</a> (current version 0.9) which you can reference in the normal fashion, anywhere after jQuery.</li>
            <li>In true jQuery style, the typical way to initialise the tabes is in the <code class="prettyprint">$(document).ready</code> code black function. Use a selector to select your table and then call <code class="prettyprint">tableDnD()</code>. You can optionally specify a set of properties (described below).</li>
        </ol>
...

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({
       ...