angularjs - Angular Gridster 在数据库中的存储位置

标签 angularjs database gridster

我正在构建一个定制的 Angular Gridster 仪表板。在加载页面时,我调用了一个函数,该函数从数据库中加载 Gridster 小部件的位置、大小和内容

    function getDashboard() {
        $scope.dashboard.widgets = [];
        angular.forEach($scope.filtered_activities, function(object) {
            $scope.dashboard.widgets.push(
                {
                    pk: object.pk,
                    process: object.process,
                    row: object.row,
                    col: object.col,                    
                    sizeY: object.sizeY,
                    sizeX: object.sizeX,
                }
            )           
        });
    };

这工作正常,小部件就像我在重新加载页面之前离开它们一样,putActivies(widget) 将它们存储在数据库中。

但是,当我想将它们拖到不同的位置时,我只能得到我存储在数据库中的位置,而不是当前位置。

    $scope.gridsterOptions = {
        margins: [20, 20],
        outerMargin: false,
        pushing: true,
        columns: 6,
        rowHeight: 100,
        draggable: {
            handle: 'h2',
            enabled: true,
            stop: function(event, $element, widget) {
                console.log(widget.col);
                putActivities(widget);
            }
        },
        resizable: {
        enabled: false,
    }
    };

所以 console.log(widget.col) 只给我数据库位置,而不是当前位置。 当我从 getDashboard() 中省略 row 和 col 属性时,它可以工作,但当然它们没有正确的位置。

是否有另一种方法来访问 widgets.col(和行)属性)?

我的 html 看起来像这样:
li gridster-item="widget"ng-repeat="widget in dashboard.widgets"

最佳答案

可拖动:{ 句柄:'h2', 启用:真, 停止:功能(事件,$元素,小部件){ 控制台日志($元素) putActivities($元素); } }, 这会完成你的工作。 注意:$element 是一个对象,它有 sixeX, sizeY, col,row 存储当前位置(col,row) 和大小(sizeX,sizeY)

关于angularjs - Angular Gridster 在数据库中的存储位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37087781/

相关文章:

sql - 没有键列的两个表的区别

javascript - Gridster 没有出现在 jQuery 变量下

javascript - ng-show 和 ng-hide 在 Ionic 中很慢。两个元素在几毫秒内可见(仅在 iOS 中)

angularjs - Ng-重复 : Filter By Uniqueness

mysql - 外键约束 : When to use ON UPDATE and ON DELETE

javascript - 网格元素垂直初始化 Gridster.js

javascript - HighStocks 可拖动元素干扰 gridster 拖动

Angularjs:测试 Controller 功能,它改变了 $scope

javascript - 如何使用 ng-click 获取 DOM 元素

mysql - 如何在mysql中使用另一个表的列来填充列