angular 的 ui-grid 在項目中使用時出現了列拖拽時,拖拽的表頭跟不上鼠標的問題,特寫了個小 demo 查找問題所在,結果發現了另外一個拖拽問題:有橫向滾動條時,拖拽的元素看不見,雖然拖拽效果是好使的。。。css
把 node_moudles 中的 ui-grid 文件夾的相關文件都拿來了:html
樣例代碼:node
<!DOCTYPE html> <html ng-app='myApp'> <head> <meta charset='utf-8'> <link rel="styleSheet" href="ui-grid.css"/> <script src='angular.js'></script> <script src='ui-grid.js'></script> <style> .myGrid { width: 1000px; height: 250px; } </style> </head> <body> <div ng-controller='myCtrl'> <div ui-grid="gridOptions" class="myGrid" ui-grid-move-columns></div> </div> <script> angular.module("myApp",['ng', 'ui.grid', 'ui.grid.moveColumns']) .controller("myCtrl",function($scope){ $scope.gridOptions = { enableSorting: false, columnDefs: [], data: [], onRegisterApi: function (gridApi) { $scope.callListApi = gridApi; //列的位置移動的時候觸發 gridApi.colMovable.on.columnPositionChanged($scope, function (colDef, prePos, newPos) { console.log(colDef, prePos, newPos); }) } } for(var i = 0; i < 30; i++) { var obj = { field: i + 'name', minWidth: 120, headerCellTemplate: '<div class="ui-grid-cell-contents"' + '>index : ' + i + '</div>' } $scope.gridOptions.columnDefs.push(obj); } for(var i = 0; i < 5; i++) { var obj = {} for (var j = 0; j < 30; j++) { obj[j + 'name'] = parseInt(Math.random()* 100); } $scope.gridOptions.data.push(obj) } }) </script> </body> </html>
看了一遍底層關於 moveColumns 的代碼。。。也沒發現有關移動的額外監聽事件。。。app
路過的大神看一看啊。待解決。dom