JSFiddle - React, Tailwind, and code Playground

by stevebeauge

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<table class="vide" heigth="30px">
    <tbody><tr></tr></tbody>
</table>

<div class="container">
    <table class="x" id="t1">
        <tbody>
            <tr>
                <td>
                    <table class="inner">
                        <tr>
                            <td class="menu">Header 1</td>
                        </tr>
                        <tr>
                            <td>Body 1</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table class="inner">
                        <tr>
                            <td class="menu">Header 2</td>
                        </tr>
                        <tr>
                            <td>Body 2</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table class="inner">
                        <tr>
                            <td class="menu">Header 3</td>
                        </tr>
                        <tr>
                            <td>Body 3</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="container">
    <table class="x" id="t2">
        <tbody>
            <tr>
                <td>
                    <table class="inner">
                        <tr>
                            <td class="menu">Header 1</td>
                        </tr>
                        <tr>
                            <td>Body 1</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table class="inner">
                        <tr>
                            <td class="menu">Header 2</td>
  ...

CSS

.container {
    display:inline-block;
    width:45%
}
table {
    border: solid 1px red; width:100%;min-height:60px
}
tr {
    border: solid 1px blue;
}
td {
    border: solid 1px green;
}
#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}
#sortable li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    height: 1.5em;
}
html>body #sortable li {
    height: 1.5em;
    line-height: 1.2em;
}
.ui-state-highlight {
    height: 1.5em;
    line-height: 1.2em;
}
.inner {
    width: 75px;
    height:75px;
    background-color:silver;
}
#log {
    white-space:pre
}

.vide  {
     min-height:26px;border:dashed 1px blue 
}
}

JavaScript

$(function () {
    var log = $("#log");
    $(".x > tbody").sortable({

        placeholder: "ui-state-highlight",
        connectWith: ".x > tbody",
        handle: ".menu",
        update: function (event, ui) {
            log.text(JSON.stringify({
                position: ui.position,
                originalPosition: ui.originalPosition,
                sender: ui.sender != null ? ui.sender.parents(".x").attr("id") : null,
                me: $(this).parents(".x").attr("id")
            }));
        },
                receive: function (event, ui) {
            log.text(JSON.stringify({
                position: ui.position,
                originalPosition: ui.originalPosition,
                sender: ui.sender != null ? ui.sender.parents(".x").attr("id") : null,
                me: $(this).parents(".x").attr("id")
            }));
        }

    }

    ).disableSelection();
});