ui-grid 列拖拽问题

angular 的 ui-grid 在项目中使用时出现了列拖拽时，拖拽的表头跟不上鼠标的问题，特写了个小 demo 查找问题所在，结果发现了另一个拖拽问题：有横向滚动条时，拖拽的元素看不见，虽然拖拽效果是好使的。。。

把 node_moudles 中的 ui-grid 文件夹的相关文件都拿来了：

 

样例代码：

复制代码
<!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 的代码。。。也没发现有关移动的额外监听事件。。。

路过的大神看一看啊。待解决。

posted @   名字不好起啊  阅读(908)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae