JSFiddle - React, Tailwind, and code Playground

by jecker

HTML

<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop Test</title>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>

<!-- ------------------------------------------------------------ -->
    
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script type="text/css" src="http://jqueryui.com/jquery-1.8.0.js"></script>
<script type="text/css" src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script type="text/css" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script type="text/css" src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
<script type="text/css" src="http://jqueryui.com/ui/jquery.ui.sortable.js"></script>    
    
</head>

<body>
    <table>
        <tbody id="sortable">
        <tr class="draggable ui-state-default" data-id="a">
            <td><img class="handle" src="handle.jpg" alt="Drag Handle"></td>
            <td>Cell A</td>
            <td>More Data</td>
            <td>More Data</td>
            <td>More Data</td>
        </tr>
        <tr class="draggable ui-state-default" data-id="aa" data-parent="a">
            <td><img class="handle" src="handle.jpg" alt="Drag Handle"></td>
            <td>Cell AA</td>
            <td>More Data</td>
            <td>More Data</td>
            <td>More Data</td>
        </tr>
        <tr class="draggable ui-state-default" data-id="ab" data-parent="a">
            <td><img class="handle" src="handle.jpg" alt="Drag Handle"></td>
            <td>Cell AB</td>
            <td>More Data</td>
            <td>More Data</td>
            <td>More Data</td>
        </tr>
        <tr class="ui-state-default" data-id="aba" data-parent="ab">
            <td><img class="handle" src="handle.jpg" alt="Drag Handle"></td>
            <td>Cell ABA</td>
            <td>More Data</td>
            <td>More Data</td>
  ...

CSS

body {
        font-family:Arial, Helvetica, sans-serif;
        font-size: 10px;
    }
    #sortable {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 60%;
    }
    #sortable tr {
        margin: 0 5px 5px 5px;
        padding: 5px;
        font-size: 1.2em;
        height: 1.5em;
    }
    html > body #sortable tr {
        height: 1.5em;
        line-height: 1.2em;
    }
    .ui-state-highlight {
        height: 1.5em;
        line-height: 1.2em;
    }
    .ui-sortable-helper {
        background:white;
        border:none;
    }

JavaScript

$(function() {
        $("#sortable").sortable({
            placeholder: "ui-state-highlight",
            items: 'tr',
         start: function(e, ui ){
             ui.placeholder.class(ui.helper.outerHeight());
         },
            helper: function(e, src) {
                var dragElements = $('<tr style="height:auto"><td colspan="5"><table style="width:98%"><tbody></tbody></table></td></tr>');
                getChildren(dragElements, src);
                return dragElements;
            },
        });
    });

    function getChildren(dst, src) {
        $('tbody', dst).append(src.clone());
        // TODO: Limit this to costing spreadsheet table?
        $('tr[data-parent="' + src.data('id') + '"]').each(function (i, el) {
            getChildren(dst, $(el));
        });
        //src.hide();
    }