JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div class="table">
    <div class="row">
        <div class="cell">Cell Data 1</div>
        <div class="cell">Cell Data 2</div>
        <div class="cell">Cell Data 3</div>
        <div class="cell">Cell Data 4</div>
        <div class="cell">Cell Data 5</div>
        <div class="cell">Cell Data 6</div>
        <div class="cell">Cell Data 7</div>
    </div>
    <div class="row">
        <div class="cell">Cell Data 1</div>
        <div class="cell">Cell Data 2</div>
        <div class="cell">Cell Data 3</div>
        <div class="cell">Cell Data 4</div>
        <div class="cell">Cell Data 5</div>
        <div class="cell">Cell Data 6</div>
        <div class="cell">Cell Data 7</div>
    </div>
    <div class="row">
        <div class="cell">Cell Data 1</div>
        <div class="cell">Cell Data 2</div>
        <div class="cell">Cell Data 3</div>
        <div class="cell">Cell Data 4</div>
        <div class="cell">Cell Data 5</div>
        <div class="cell">Cell Data 6</div>
        <div class="cell">Cell Data 7</div>
    </div>
    <div class="row">
        <div class="cell">Cell Data 1</div>
        <div class="cell">Cell Data 2</div>
        <div class="cell">Cell Data 3</div>
        <div class="cell">Cell Data 4</div>
        <div class="cell">Cell Data 5</div>
        <div class="cell">Cell Data 6</div>
        <div class="cell">Cell Data 7</div>
    </div>
    <div class="row">
        <div class="cell">Cell Data 1</div>
        <div class="cell">Cell Data 2</div>
        <div class="cell">Cell Data 3</div>
        <div class="cell">Cell Data 4</div>
        <div class="cell">Cell Data 5</div>
        <div class="cell">Cell Data 6</div>
        <div class="cell">Cell Data 7</div>
    </div>
    <div class="row">
        <div class="cell">Cell Data 1</div>
        <div class="cell">Cell Data 2</div>
        <div class="cell">Cell Data 3</div>
        <div class="cell">Cell Data 4</div>
        <div class="cell">Cell Data 5</div>
        <div class="cell">Cell...

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.table {
    display: table;
    font-family:"HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size: 1em;
    margin-top: 100px;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -khtml-user-drag: element;
    -webkit-user-drag: element;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid #000;
    border-right: none;
    border-bottom: none;
    cursor: default;
}
.row:last-child .cell {
    border-bottom: 1px solid #000;
}
.row .cell:last-child {
    border-right: 1px solid #000;
}
.row:first-child .cell {
    cursor: move;
}

JavaScript

$(".table").sortable({
    axis: "y",
    cursor: "move",
    cancel: ".row:not(:first-child) .cell",
    activate: function (event, ui) {
        console.log(event);
        console.log($(this));
        //event.currentTarget.toElement = $(".row .cell:nth-child(" + ($(event.currentTarget.toElement).index() + 1) + ")");
    }
});
$(".table").disableSelection();