1

I have a table that allows the column headers to be re-ordered by dragging and dropping. The column headers are bound to an angular model, except the last column that is always fixed. I am using jquery UI dragtable to handle the drag/drop aspect (wired up using a simple custom directive).

This worked well enough in Angular 1.0.8, but after upgrading to 1.2.2 sometimes the last fixed column moves to the middle of the table, and the angular model gets out-of-sync with the view.

Working jsfiddle using 1.0.8: http://jsfiddle.net/Lw5dG/ Broken jsfiddle using 1.2.2: http://jsfiddle.net/Lw5dG/2 (drag col3 all the way to the left to recreate and note that the UL element below the table shows the wrong column order)

(both contain exactly the same code, the only difference is the version of angular used)

View

<div ng-app="myapp" ng-controller="TestCtrl">
    <table id="tab1">
        <tr>
            <th class="accept" drag-table ng-repeat="col in model.cols">{{col}}</th>
            <th class="static">STATIC</th>
        </tr>
    </table>

    <ul>
        <li ng-repeat="col in model.cols">{{col}}</li>
    </ul>
</div>

JS

var myapp = angular.module('myapp', []);

myapp.controller('TestCtrl', function ($scope) {
    $scope.model = {};
    $scope.model.cols = ['Col1', 'Col2', 'Col3'];

    $scope.dragTableDone = function(){
        $scope.model.cols = [];
        $('#tab1 th:not(.static)').each(function () {
            console.log('pushing ' + $(this).text());
            $scope.model.cols.push($(this).text());
        });
        $scope.$apply();
    };
});

myapp.directive('dragTable', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch('$last', function (v) {
                if (v) {
                    $(element).closest('table').dragtable({ maxMovingRows: 1, beforeStop:scope.$parent.dragTableDone, dragaccept: '.accept' });
                }
            });
        }
    };
});

$(function() {
    $('table').dragtable();
});

I appreciate that I may not be doing this the angular way, so if you can suggest a better approach please let me know.

Charles
  • 50,943
  • 13
  • 104
  • 142
Simon
  • 5,373
  • 1
  • 34
  • 46
  • You may follow this link: http://stackoverflow.com/questions/21395363/dragging-a-table-column-using-html5-and-angularjs?noredirect=1#comment32272557_21395363 – Asutosh Feb 01 '14 at 15:37

0 Answers0