Angular Gridster make draggable only for particular part inside grid

Question

I am using ManifestWebDesign Angular Gridster and not able to enable drag only for a particular portion of the grid as shown in the Gridster Demo example below.

Expected to work like Gridster Demo

Currently using the angular gridster configuration shown here - check handle option under draggable

I have implemented a plunker here - Angular Gridster The plunker example uses '.my-class' as shown in the configuration.

Not sure how to 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 }
    ];
 });

score 3 · Answer 1 · answered Oct 01 '15 at 08:06

In my case, this was caused by a race condition where the handle css picker was running before the DOM elements where even there - so it did not work correctly. I have seen that the angular-gridster was coded this way before, but was changed in the last version, so I reverted the chages by wrapping it with a timeout function (in the angular-gridster.js file).

$timeout(function() {
    enabled = true;

    // timeout required for some template rendering
    $el.ready(function() {
        if (enabled !== true) {
        return;
    }
    // disable any existing draghandles
    for (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 another one:

$timeout(function() {

    for (var u = 0, ul = unifiedInputs.length; u < ul; ++u) {
        unifiedInputs[u].disable();
    }
    enabled = false;

    unifiedInputs = [];
    enabled = false;
    for (var u = 0, ul = unifiedInputs.length; u < ul; ++u) {
        unifiedInputs[u].disable();
    }

});

score 0 · Answer 2 · answered Sep 29 '16 at 10:52

You have to use the same option name what you have used in the Controller. In controller you have used '$scope.gridsterConfiguration' but in html you have used it as 'gridsterOptions'. Change it to gridster='gridsterConfiguration' in html as well. It works!!

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 }
];
});

/* Styles go here */
    .gridster-item {
        background-color: darkgrey;
    }
    .my-class{
      border:1px solid red;
      height:50px;
    }

<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://rawgit.com/ManifestWebDesign/angular-gridster/master/dist/angular-gridster.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-resize/1.1/jquery.ba-resize.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js'></script>
  <script src='https://rawgit.com/ManifestWebDesign/angular-gridster/master/src/angular-gridster.js'></script>
  <script src="script.js"></script>
</head>

<body ng-app='gridsterApp'>
  <h4>Please increase width of window to see the gridster items to make them draggable</h4>
  <div ng-controller='gridsterController'>
    <span> Dragging needs to work only on clicking <strong>Drag Here</strong> below inside the grid, but currently works for entire grid.</span>
    <a href='http://gridster.net/demos/custom-drag-handle'>Gridster Expected Interaction Example</a>
    <div gridster='gridsterConfiguration'>
      <ul>
        <li gridster-item="item" ng-repeat="item in standardItems">
          <div class='my-class'>Drag Here</div>
          <span> drag using text below</span>

        </li>
      </ul>
    </div>
  </div>
</body>

</html>

And the updated Plunker - here

score -2 · Answer 3 · answered Oct 07 '15 at 14:37

Code from https://rawgit.com/ManifestWebDesign/angular-gridster/master/src/angular-gridster.js which is included in your HTML in plunker example is not the last version and is not the same as from here: https://github.com/ManifestWebDesign/angular-gridster/blob/master/src/angular-gridster.js (GitHub) Please, use this file/code.

For me, this feature is working.

P.S. Be careful with object field names. Handle and handles (for resizeable is handles)

Angular Gridster make draggable only for particular part inside grid

3 Answers3