<NME> grid.columnReorder.js
<BEF> ﻿/** 
 * @widget Grid 
 * @plugin Column Reorder
 */
gj.grid.plugins.columnReorder = {
    config: {
        base: {
            /** If set to true, enable column reordering with drag and drop.
             * @type boolean
             * @default false
             * @example Material.Design <!-- grid, draggable, droppable -->
             * <p>Drag and Drop column headers in order to reorder the columns.</p>
             * <table id="grid"></table>
             * <script>
             *     $('#grid').grid({
             *         dataSource: '/Players/Get',
             *         columnReorder: true,
             *         columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
             *     });
             * </script>
             * @example Bootstrap <!-- bootstrap, grid, draggable, droppable -->
             * <p>Drag and Drop column headers in order to reorder the columns.</p>
             * <table id="grid"></table>
             * <script>
             *     $('#grid').grid({
             *         dataSource: '/Players/Get',
             *         uiLibrary: 'bootstrap',
             *         columnReorder: true,
             *         columns: [ { field: 'ID', width: 36 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
             *     });
             * </script>
             * @example Bootstrap.4 <!-- bootstrap4, grid, draggable, droppable -->
             * <p>Drag and Drop column headers in order to reorder the columns.</p>
             * <table id="grid"></table>
             * <script>
             *     $('#grid').grid({
             *         dataSource: '/Players/Get',
             *         uiLibrary: 'bootstrap4',
             *         columnReorder: true,
             *         columns: [ { field: 'ID', width: 48 }, { field: 'Name', sortable: true }, { field: 'PlaceOfBirth', sortable: true } ]
             *     });
             * </script>

        createMouseDownHandler: function ($grid, $thSource) {
            return function (e) {
                var $dragEl = $grid.clone();
                $('body').append($dragEl);
                $dragEl.attr('data-role', 'draggable-clone').css('cursor', 'move');
                $dragEl.children('tbody').remove().children('tfoot').remove();
                $dragEl.find('thead tr th:eq(' + $thSource.index() + ')').siblings().remove();
                $dragEl.draggable({
                    stop: gj.grid.plugins.columnReorder.private.createDragStopHandler($grid, $thSource)
                });
            var i, $cell,
                $cells = $grid.find('thead tr th');
            for (i = 0; i < $cells.length; i++) {
                $cell = $($cells[i]);
                $cell.on('mousedown', gj.grid.plugins.columnReorder.private.createMouseDownHandler($grid, $cell));
                $cell.on('mousemove', gj.grid.plugins.columnReorder.private.createMouseMoveHandler($grid, $cell));
                $cell.on('mouseup', gj.grid.plugins.columnReorder.private.createMouseUpHandler($grid, $cell));
            }
        },
                        $dropEl.droppable('destroy');
                    }
                    $dropEl.droppable({
                        over: gj.grid.plugins.columnReorder.private.createDroppableOverHandler($thSource),
                        out: gj.grid.plugins.columnReorder.private.droppableOut
                    });
                });
        },

        createMouseUpHandler: function ($grid) {
            return function (e) {
                clearTimeout($grid.timeout);
                $grid.data('dragReady', false);
            }
        },

        createMouseMoveHandler: function ($grid, $thSource) {
                        targetPosition = gj.grid.methods.getColumnPosition(data.columns, $thTarget.data('field')),
                        sourcePosition = gj.grid.methods.getColumnPosition(data.columns, $thSource.data('field'));

                    $thTarget.removeClass('gj-grid-base-left-border');
                    $thTarget.removeClass('gj-grid-base-right-border');
                    if ($thTarget.droppable('isOver', mouseEvent)) {
                        if (targetPosition < sourcePosition) {
                            $thTarget.before($thSource);
                    $dragEl.attr('data-role', 'draggable-clone').css('cursor', 'move');
                    $dragEl.find('thead tr th:eq(' + srcIndex + ')').siblings().remove();
                    $dragEl.find('tbody tr[data-role != "row"]').remove();
                    $dragEl.find('tbody tr td:nth-child(' + (srcIndex + 1) + ')').siblings().remove();
                    $dragEl.find('tfoot').remove();
                    $dragEl.draggable({
                        stop: gj.grid.plugins.columnReorder.private.createDragStopHandler($grid, $thSource)
                    });
                    $dragEl.css({
                        position: 'absolute', top: $thSource.offset().top, left: $thSource.offset().left, width: $thSource.width(), zIndex: 1
                    });
                    if ($thSource.attr('data-droppable') === 'true') {
                        $thSource.droppable('destroy');
                    }
                    $thSource.siblings('th').each(function () {
                        var $dropEl = $(this);
                        if ($dropEl.attr('data-droppable') === 'true') {
                            $dropEl.droppable('destroy');
                        }
                        $dropEl.droppable({
            }
        },

        createDroppableOverHandler: function ($thTarget) {
            return function (e) {
                var $thTarget = $(this),
                    targetPosition = $thTarget.data('position'),
                    sourcePosition = $thTarget.data('position');
                if (targetPosition < sourcePosition) {
                    $thTarget.addClass('gj-grid-base-left-border');
                } else {
                    $thTarget.addClass('gj-grid-base-right-border');
                }
            };
        },

        droppableOut: function () {
            $(this).removeClass('gj-grid-base-left-border');
            $(this).removeClass('gj-grid-base-right-border');
        }
    },

                            $thTarget.after($thSource);
                        }
                        gj.grid.plugins.columnReorder.private.moveRowCells($grid, sourcePosition, targetPosition);
                        data.columns.splice(targetPosition, 0, data.columns.splice(sourcePosition, 1)[0]);
                    }
                    $thTarget.droppable('destroy');
                });
            }
        },

        moveRowCells: function ($grid, sourcePosition, targetPosition) {
            var i, $row, $rows = $grid.find('tbody tr[data-role="row"]');
            for (i = 0; i < $rows.length; i++) {
                $row = $($rows[i]);
                if (targetPosition < sourcePosition) {
                    $row.find('td:eq(' + targetPosition + ')').before($row.find('td:eq(' + sourcePosition + ')'));
                } else {
                    $row.find('td:eq(' + targetPosition + ')').after($row.find('td:eq(' + sourcePosition + ')'));
                }                
            }
        },

        createDroppableOverHandler: function ($grid, $thSource) {
            return function (e) {
                var $thTarget = $(this),
                    data = $grid.data(),
                    targetPosition = gj.grid.methods.getColumnPosition(data.columns, $thTarget.data('field')),
                    sourcePosition = gj.grid.methods.getColumnPosition(data.columns, $thSource.data('field'));
                if (targetPosition < sourcePosition) {
                    $thTarget.addClass('gj-grid-left-border');
                    $grid.find('tbody tr[data-role="row"] td:nth-child(' + ($thTarget.index() + 1) + ')').addClass('gj-grid-left-border');
                } else {
                    $thTarget.addClass('gj-grid-right-border');
                    $grid.find('tbody tr[data-role="row"] td:nth-child(' + ($thTarget.index() + 1) + ')').addClass('gj-grid-right-border');
                }
            };
        },

        droppableOut: function () {
            var $thTarget = $(this);
            $thTarget.removeClass('gj-grid-left-border').removeClass('gj-grid-right-border');
            $thTarget.closest('table').find('tbody tr[data-role="row"] td:nth-child(' + ($thTarget.index() + 1) + ')').removeClass('gj-grid-left-border').removeClass('gj-grid-right-border');
        }
    },

    public: {
    },

    configure: function ($grid, fullConfig, clientConfig) {
        $.extend(true, $grid, gj.grid.plugins.columnReorder.public);
        if (fullConfig.columnReorder) {
            $grid.on('initialized', function () {
                gj.grid.plugins.columnReorder.private.init($grid);
            });
        }
    }
};

<MSG> improved the row reorder plugin.

<DFF> @@ -43,11 +43,14 @@ gj.grid.plugins.columnReorder = {
 
         createMouseDownHandler: function ($grid, $thSource) {
             return function (e) {
-                var $dragEl = $grid.clone();
+                var $dragEl = $grid.clone(),
+                    srcIndex = $thSource.index();
                 $('body').append($dragEl);
                 $dragEl.attr('data-role', 'draggable-clone').css('cursor', 'move');
-                $dragEl.children('tbody').remove().children('tfoot').remove();
-                $dragEl.find('thead tr th:eq(' + $thSource.index() + ')').siblings().remove();
+                $dragEl.find('thead tr th:eq(' + srcIndex + ')').siblings().remove();
+                $dragEl.find('tbody tr[data-role != "row"]').remove();
+                $dragEl.find('tbody tr td:nth-child(' + (srcIndex + 1) + ')').siblings().remove();
+                $dragEl.find('tfoot').remove();
                 $dragEl.draggable({
                     stop: gj.grid.plugins.columnReorder.private.createDragStopHandler($grid, $thSource)
                 });
@@ -63,7 +66,7 @@ gj.grid.plugins.columnReorder = {
                         $dropEl.droppable('destroy');
                     }
                     $dropEl.droppable({
-                        over: gj.grid.plugins.columnReorder.private.createDroppableOverHandler($thSource),
+                        over: gj.grid.plugins.columnReorder.private.createDroppableOverHandler($grid, $thSource),
                         out: gj.grid.plugins.columnReorder.private.droppableOut
                     });
                 });
@@ -80,8 +83,8 @@ gj.grid.plugins.columnReorder = {
                         targetPosition = gj.grid.methods.getColumnPosition(data.columns, $thTarget.data('field')),
                         sourcePosition = gj.grid.methods.getColumnPosition(data.columns, $thSource.data('field'));
 
-                    $thTarget.removeClass('gj-grid-base-left-border');
-                    $thTarget.removeClass('gj-grid-base-right-border');
+                    $thTarget.removeClass('gj-grid-base-left-border').removeClass('gj-grid-base-right-border');
+                    $thTarget.closest('table').find('tbody tr[data-role="row"] td:nth-child(' + ($thTarget.index() + 1) + ')').removeClass('gj-grid-base-left-border').removeClass('gj-grid-base-right-border');
                     if ($thTarget.droppable('isOver', mouseEvent)) {
                         if (targetPosition < sourcePosition) {
                             $thTarget.before($thSource);
@@ -108,22 +111,25 @@ gj.grid.plugins.columnReorder = {
             }
         },
 
-        createDroppableOverHandler: function ($thTarget) {
+        createDroppableOverHandler: function ($grid, $thSource) {
             return function (e) {
                 var $thTarget = $(this),
                     targetPosition = $thTarget.data('position'),
-                    sourcePosition = $thTarget.data('position');
+                    sourcePosition = $thSource.data('position');
                 if (targetPosition < sourcePosition) {
                     $thTarget.addClass('gj-grid-base-left-border');
+                    $grid.find('tbody tr[data-role="row"] td:nth-child(' + ($thTarget.index() + 1) + ')').addClass('gj-grid-base-left-border');
                 } else {
                     $thTarget.addClass('gj-grid-base-right-border');
+                    $grid.find('tbody tr[data-role="row"] td:nth-child(' + ($thTarget.index() + 1) + ')').addClass('gj-grid-base-right-border');
                 }
             };
         },
 
         droppableOut: function () {
-            $(this).removeClass('gj-grid-base-left-border');
-            $(this).removeClass('gj-grid-base-right-border');
+            var $thTarget = $(this);
+            $thTarget.removeClass('gj-grid-base-left-border').removeClass('gj-grid-base-right-border');
+            $thTarget.closest('table').find('tbody tr[data-role="row"] td:nth-child(' + ($thTarget.index() + 1) + ')').removeClass('gj-grid-base-left-border').removeClass('gj-grid-base-right-border');
         }
     },
 

{'addition_count': 16, 'commit_subject': 'improved the row reorder plugin.', 'deletion_count': 10, 'file_extension': '.js', 'lang': 'columnReorder', 'license': 'mit', 'repo_name': 'atatanasov/gijgo'}