角度グリッドスタックでドラッグ＆リサイズできません

角度グリッドスタックフレームワークを試しています。デモコードを取得しようとしています。角度グリッドスタックでドラッグ＆リサイズできません

これはフレームワークへのリンクである：これは私の角度ファイルである

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>

ライブラリが正常に動作しているが、問題は、私はウィジェットを移動したり、サイズを変更することはできませんです。これはフレームワークのバグですか？ウィジェットを移動してサイズを変更するにはどうすればよいですか？私はjQueryライブラリの古いバージョンを使用し実現

<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

出典

2017-12-07 Fearcoder