JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://d2f0wfr3cvoae4.cloudfront.net/jquery.mjs.nestedSortable.js"></script>
<link rel="stylesheet" href="http://d2f0wfr3cvoae4.cloudfront.net/nestedSortable.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="container">
    <table id="example_table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="name_col"><span>This is a resource</span></td>
                <td>And its description</td>
            </tr>
            <tr>
                <td class="name_col"><span>This is a second resource</span></td>
                <td>With another description</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="container">
    <ol class="sortable" id="structure">
       <li class="mjs-nestedSortable-branch mjs-nestedSortable-collapsed">
           <div>
               <span class="disclose"><i class="fa fa-plus"></i></span>
               This is a sortable item.
           </div>
        </li>
       <li class="mjs-nestedSortable-branch mjs-nestedSortable-collapsed">
           <div>
               <span class="disclose"><i class="fa fa-plus"></i></span>
               This is a second sortable item.
           </div>
        </li>
    </ol>
</div>

JavaScript

$('#example_table').dataTable({
    'sPaginationType': 'full_numbers',
    'bJQueryUI':true
});

$('ol.sortable').nestedSortable({
    forcePlaceholderSize: true,
    handle: '.disclose',
    helper: 'clone',
    items: 'li',
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div',
    maxLevels: 4,
    isTree: true,
    expandOnHover: 700,
    startCollapsed: true,
    stop: function(e, ui) {
    },
    connectWith: '#example_table',
    receive: function( e, ui ) {
    }
});

$( '#example_table > tbody > tr').draggable({
    connectToNestedSortable: "#structure",
    helper: function( event ) {
        var _this = $(this);
        var name_col = _this.find('.name_col')
        .children('span');
        var name = name_col.text();
        var new_ele = $('<li></li>')
            .addClass('mjs-nestedSortable-branch')
            .addClass('mjs-nestedSortable-collapsed')
            .append('<div></div>')
            .append('<span><i class="fa fa-plus"></i></span>' + name);
        return new_ele.clone();
    },
    revert: "invalid",
    stop: function ( event, ui ) {
        $(ui.item).replaceWith(ui.helper);
    }
});

// From:
// https://github.com/mjsarfatti/nestedSortable/issues/86
// To make draggables compatible with nestedSortable
$.ui.plugin.add("draggable", "connectToNestedSortable", {
    start: function(event, ui) {
        var inst = $(this).data("ui-draggable"), o = inst.options,
            uiSortable = $.extend({}, ui, { item: inst.element });
        inst.sortables = [];
        $(o.connectToNestedSortable).each(function() {
            var sortable = $.data(this, "mjs-nestedSortable");
            if (sortable && !sortable.options.disabled) {
                inst.sortables.push({
                    instance: sortable,
                    shouldRevert: sortable.options.revert
                });
                sortable.refreshPositions();	// Call the...