ui-grid 列拖拽問題

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

相關文章
相關標籤/搜索