JSFiddle - React, Tailwind, and code Playground

by bmccord

HTML

<table id="table-1" cellspacing="0" cellpadding="2">
<tbody>

<tr id="1" style="cursor: move; background-color: transparent;">
<td>1</td>
<td>One</td>
<td>some text</td>
</tr><tr id="2" style="cursor: move; background-color: transparent;">
<td>2</td>
<td>Two</td>
<td>some text</td>
</tr>
<tr id="3" style="cursor: move;">
<td>3</td>
<td>Three</td>
<td>some text</td>
</tr>
<tr id="4" style="cursor: move;">
<td>4</td>
<td>Four</td>
<td>some text</td>
</tr>
<tr id="5" style="cursor: move;">
<td>5</td>
<td>Five</td>
<td>some text</td>
</tr>
<tr id="6" style="cursor: move;">
<td>6</td>
<td>Six</td>
<td>some text</td>
</tr>
</tbody>
</table>

JavaScript

// ===================================================================
// Author: Denis Howlett <[email protected]>
// WWW: http://www.isocra.com/
//
// NOTICE: You may use this code for any purpose, commercial or
// private, without any further permission from the author. You may
// remove this notice from your final code if you wish, however we
// would appreciate it if at least the web site address is kept.
//
// You may *NOT* re-distribute this code in any way except through its
// use. That means, you can include it in your product, or your web
// site, or any other form where the code is actually being used. You
// may not put the plain javascript up on your site for download or
// include it in your javascript libraries for download.
// If you wish to share this code with others, please just point them
// to the URL instead.
//
// Please DO NOT link directly to this .js files from your site. Copy
// the files to your server and use them there. Thank you.
// ===================================================================

/** Keep hold of the current table being dragged */
var currenttable = null;

/** Capture the onmousemove so that we can see if a row from the current
 *  table if any is being dragged.
 * @param ev the event (for Firefox and Safari, otherwise we use window.event for IE)
 */
document.onmousemove = function(ev){
    if (currenttable && currenttable.dragObject) {
        ev   = ev || window.event;
        var mousePos = currenttable.mouseCoords(ev);
        var y = mousePos.y - currenttable.mouseOffset.y;
        if (y != currenttable.oldY) {
            // work out if we're going up or down...
            var movingDown = y > currenttable.oldY;
            // update the old value
            currenttable.oldY = y;
            // update the style to show we're dragging
            currenttable.dragObject.style.backgroundColor = "#eee";
            // If we're over a row then move the dragged row to there so that the user sees the
     ...