Question

我正在尝试使用角度gridstack框架。我试图让演示代码工作。

这是框架的链接：

https://github.com/kdietrich/gridstack-angular

这是我的角度文件：

generalApp.controller('DashBoardcontroller', ['$scope', '$mdDialog', '$log', function ($scope, $mdDialog, $log) {


$scope.widgets = [{ x: 0, y: 0, width: 1, height: 1 }, { x: 0, y: 0, width: 3, height: 1 }];
$scope.options = {
    cellHeight: 200,
    verticalMargin: 10
};
$scope.addWidget = function () {
    var newWidget = { x: 0, y: 0, width: 1, height: 1 };
    $scope.widgets.push(newWidget);
};
$scope.moveWidget = function () {
    $scope.widgets[0].x = 1;
    $scope.widgets[0].width = 2;
    $scope.widgets[0].height = 2;
};
$scope.removeWidget = function (w) {
    var index = $scope.widgets.indexOf(w);
    $scope.widgets.splice(index, 1);
};
$scope.onChange = function (event, items) {
    $log.log("onChange event: " + event + " items:" + items);
};
$scope.onDragStart = function (event, ui) {
    $log.log("onDragStart event: " + event + " ui:" + ui);
};
$scope.onDragStop = function (event, ui) {
    $log.log("onDragStop event: " + event + " ui:" + ui);
};
$scope.onResizeStart = function (event, ui) {
    $log.log("onResizeStart event: " + event + " ui:" + ui);
};
$scope.onResizeStop = function (event, ui) {
    $log.log("onResizeStop event: " + event + " ui:" + ui);
};
$scope.onItemAdded = function (item) {
    $log.log("onItemAdded item: " + item);
};
$scope.onItemRemoved = function (item) {
    $log.log("onItemRemoved item: " + item);
};

}]）;

这是我的index.html文件：

<div ng-app="generalApp" class="container-fluid" ng-controller="DashBoardcontroller">
<p>{{widgets}}</p>
<div>
    <a class="btn btn-primary" ng-click="addWidget()" href="#">Add Widget</a>
    <a class="btn btn-primary" ng-click="moveWidget()" href="#">Move Widget</a>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div gridstack class="grid-stack grid1" options="options" on-change="onChange(event,items)" on-drag-start="onDragStart(event,ui)" on-drag-stop="onDragStop(event,ui)" on-resize-start="onResizeStart(event,ui)" on-resize-stop="onResizeStop(event,ui)">
            <div gridstack-item ng-repeat="w in widgets" class="grid-stack-item" gs-item-x="w.x" gs-item-y="w.y"
                 gs-item-width="w.width" gs-item-height="w.height" gs-item-autopos="1" on-item-added="onItemAdded(item)" on-item-removed="onItemRemoved(item)">
                <div class="grid-stack-item-content">
                    <a class="btn btn-primary" ng-click="removeWidget(w)" href="#">remove</a>
                </div>
            </div>
        </div>
    </div>
</div>

库工作正常，但问题是我无法移动或调整窗口小部件的大小。这是框架中的错误吗？我该怎么做才能移动窗口小部件并调整其大小？

亲切的问候

现场演示：http://kdietrich.github.io/gridstack-angular/demo/

现场演示代码：https://github.com/kdietrich/gridstack-angular/tree/master/demo

图书馆清单：

<script src="~/Scripts/Gridstack/gridstack.js"></script>
<script src="~/Scripts/Gridstack/gridstack-angular.js"></script> 
<script src="~/Scripts/Gridstack/gridstack.controller.js"></script>
<script src="~/Scripts/Gridstack/gridstack.directive.js"></script>
<script src="~/Scripts/Gridstack/gridstackitem.directive.js"></script

Answer 1

我意识到我使用了旧版本的Jquery库！我通过nuget包更新了它，一切正常。

无法使用角度网格堆叠拖动和调整大小

1 个答案: