Angular Gridster 存储在数据库中的位置答案

【问题标题】：Angular Gridster store position in DBAngular Gridster 存储在数据库中的位置
【发布时间】：2016-09-02 10:28:11
【问题描述】：

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

    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() 中省略行和 col 属性时，它可以工作，但是当然没有正确的位置。

还有其他方法可以访问 widgets.col（和行）属性吗？

我的 html 如下所示：
li gridster-item="widget" ng-repeat="widget in dashboard.widgets"

【问题讨论】：

标签： angularjs database gridster

【解决方案1】：

draggable: { handle: 'h2', enabled: true, stop: function(event, $element, widget) { console.log($element) putActivities($element); } }, 这会做你的工作。注意：$element 是一个有sixeX, sizeY, col,row 的对象，存储当前位置(col,row) 和size(sizeX,sizeY)

【讨论】：