angularjs - Angular Gridster make draggable only for particular part inside grid -
i using manifestwebdesign angular gridster , not able enable drag particular portion of grid shown in gridster demo example below.
expected work gridster demo
currently using angular gridster configuration shown here - check handle option under draggable
i have implemented plunker here - angular gridster plunker example uses '.my-class' shown in configuration.
not sure how make 'handle option under draggable work'.
html
<body ng-app='gridsterapp'> <div ng-controller='gridstercontroller'> <div gridster='gridsteroptions'> <ul> <li gridster-item="item" ng-repeat="item in standarditems"> <div class='my-class'>drag here</div> </li> </ul> </div> </div> </body>
javascript
angular.module('gridsterapp', ['gridster']) .controller('gridstercontroller', function($scope){ $scope.gridsterconfiguration = { ismobile: false, defaultsizex: 2, defaultsizey: 2, resizable: { enabled: true }, draggable: { enabled: true, handle: '.my-class' }, margin: [10,10] }; $scope.standarditems = [ { sizex: 2, sizey: 1, row: 0, col: 0 }, { sizex: 2, sizey: 2, row: 0, col: 2 } ]; });
in case, caused race condition handle css picker running before dom elements there - did not work correctly. have seen angular-gridster coded way before, changed in last version, reverted chages wrapping timeout function (in angular-gridster.js file).
$timeout(function() { enabled = true; // timeout required template rendering $el.ready(function() { if (enabled !== true) { return; } // disable existing draghandles (var u = 0, ul = unifiedinputs.length; u < ul; ++u) { unifiedinputs[u].disable(); unifiedinputs[h] = new gridstertouch($draghandles[h], mousedown, mousemove, mouseup); unifiedinputs[h].enable(); } enabled = true; }); };
and one:
$timeout(function() { (var u = 0, ul = unifiedinputs.length; u < ul; ++u) { unifiedinputs[u].disable(); } enabled = false; unifiedinputs = []; enabled = false; (var u = 0, ul = unifiedinputs.length; u < ul; ++u) { unifiedinputs[u].disable(); } });
Comments
Post a Comment