Tree table with sorting

by vinodlouis

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://yourjavascript.com/11193350347/jquery-treetable.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
<table id="table" class="treetable">
    <thead>
        <tr>
            <th>derp</th>
            <th>derp2</th>
        </tr>
    </thead>
    <tbody class="sortable">
        <tr class="draggable branch expanded ui-draggable ui-droppable" data-tt-id="11" style="position: relative;">
            <td><span class="indenter" style="padding-left: 0px;"><a href="#" title="Collapse"></a></span>
 <span class=" isRoot " name="span_content">Derp1</span>

        </tr>
        <tr class="draggable branch expanded ui-draggable ui-droppable" data-tt-id="15" data-tt-parent-id="11" style="position: relative;">
            <td><span class="indenter" style="padding-left: 24px;"><a href="#" title="Collapse"></a></span>
 <span class="" name="span_content">Bulid next4</span>

            </td>
        </tr>
        <tr class="draggable branch expanded ui-draggable ui-droppable" data-tt-id="12" data-tt-parent-id="15" style="position: relative;">
            <td><span class="indenter" style="padding-left: 48px;"><a href="#" title="Collapse"></a></span>
 <span class="" name="span_content">Bulid next</span>

            </td>
        </tr>
        <tr class="draggable branch expanded ui-draggable ui-droppable" data-tt-id="17" data-tt-parent-id="12" style="position: relative;">
            <td><span class="indenter" style="padding-left: 72px;"><a href="#" title="Collapse"></a></span>
 <span class="" name="span_content">Bulid next5</span>

            </td>
        </tr>
        <tr class="draggable leaf expanded ui-draggable ui-droppable" data-tt-id="16" data-tt-parent-id="17" style="position: relative;">
            <td><span class="indenter" style="padding-left: 96px;"></span>
 <span class="" name="span_content">Bulid...

CSS

table {
    border-collapse:collapse;
    width: 500px;
}
table.treetable tr.collapsed span.indenter a {
    background-color: blue;
}
table.treetable tr.expanded span.indenter a {
    background-color: red;
}
.append-to-task {
    border-bottom: 2px dotted #3B5998 !important;
    ;
}
.accept-incoming-task {
    background-color: #a3bce4 !important;
    color: #ffffff !important;
}

JavaScript

$(document).ready(function () {

    // Treetable
    $("table").treetable({
        expandable: true,
        initialState: "expanded",
        expanderTemplate: "<a href='#'>&nbsp;&nbsp;&nbsp;&nbsp;</a>",
        indent: 24,
        column: 0
    });

    // Draggable
    $("table .draggable").draggable({
        opacity: .75,
        refreshPositions: true,
        revert: "invalid",
        revertDuration: 300,
        scroll: true,
        delay: 100,
        cursor: 'move'
    });

    //Droppable
    $("table tbody tr").each(function () {
        $(this).droppable({
            accept: ".draggable",
            hoverClass: "append-to-task",
            over: function (e, ui) {
                var self = this;

                var droppedEl = ui.draggable;
                // used for expanding row when a row is dragged over
                if (this != droppedEl[0] && !$(this).is(".expanded")) {
                    $("table").treetable("expandNode", $(this).data("ttId"));
                }

                last_changed_element = $(self);

                // Set 0.7 seconds timeout
                timeout = setTimeout(function () {
                    $(self).removeClass('append-to-task').addClass('accept-incoming-task');
                }, 700);

            },
            out: function () {
                $(last_changed_element).removeClass('accept-incoming-task');

                var self = this;
                clearTimeout(timeout);
            },
            drop: function (e, ui) {

                var droppedEl = ui.draggable;
                // Adds the task as the first child to dropped row
                $("table").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
            },
        });
    });
});