DragAndDropTable

HTML

<table class="draggablerows">
    <thead>
        <th class="draghandle"></th>
        <th class="selector"></th>
        <th class="menu"></th>
        <th class="name">Name</th>
        <th class="title">Title</th>
        <th class="dob">DOB</th>
        <th class="abc">abc</th>
        <th class="xyz">xyz</th>
    </thead>
    <tbody>
    </tbody>
</table>

<br/>
<br/>
<br/>
<br/>

CSS

body {
    margin: 0px;
}
table tr.draggableRowHover td {
    background-color: gray;
}
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table td {
    border: 1px solid black;
}
table tr.even td {
    background-color: lightgray;
}
table tr.odd td {
    background-color: lightblue;
}

table th.draghandle {
    width: 25px;
}
table th.selector {
    width: 25px;
}
table th.name {
}
table th.title {
    width: 300px;
}
table th.dob {
    width: 75px;
}
table tr.draggableRowDragging {
    opacity: 0.8;
}
table tr.draggableRowDropIndicator {
    height: 3px;
}
table tr.draggableRowDropIndicator td {
    background-color: blue;
}


table td.draghandle {
    cursor: move;
    width: 25px;
    text-align: center;
}

JavaScript

(function ($) {

    $.fn.draggableRows = function (options) {
        var $table = this;
        var state = {};

        options = options || {};

        $table.on("mousedown", (options.handle || ".draghandle"), onMouseDown);
        //$table.on("mousemove", onMouseMove);
        $table[0].addEventListener("mousemove", onMouseMove, false);
        $table.on("mouseup", onMouseUp);
        //$table.css("position", "relative");

        return this;

        function onMouseDown(ev) {
            if (state.dragging || ev.which !== 1) return;

            var $row = $(this).closest("tr");
            beginDrag($row, ev);
            return false;
        }

        function onMouseMove(ev) {
            if (!state.dragging) return;
            // where are we at now?
            var y = ev.pageY;
            // how far does that differ from where we started?
            var deltaY = ev.pageY - state.startingCursor.y;
            // the new position of the row is whatever it started at plus the delta
            var newY = state.startingPosition.top + deltaY;
            state.draggedRow.css("top", newY);
            //state.draggedRow.css("transform", "translateY(" + deltaY + "px)");

            // figure out what row we are hovering over.
            // we must move the row out of the way of the cursor so we can see what is 
            // under it. Move it..
            //var originalLeft = state.draggedRow.css("left");
            //state.draggedRow.css("left", "-10000px");
            //state.draggedRow.css("visibility", "hidden");
            
            // substract rowToCursorOffset so that we are looking from the top edge of the row being dragged
            // instead of from the cursor position, which feels more natural.
            var $hoveredRow = getHoveredRow(ev, y - state.rowToCursorOffset.y);

            // then restore it...
            //state.draggedRow.css("left", originalLeft);
            //state.draggedRow.css("left", "");
           ...