howto disable drag for an item?

[johnstontrav]

I have tried:

{row: 0, col: 0, draggable: false}

tried using ng-class to set/clear ".handle" to prevent dragging.

I am using 0.13.5

Cheers, Trav.

[brendanoffer]

I have a similiar issue. For me, I have a directive containing a template inside each grid item. The grid item looks at draggable.handle then checks the element to see if the handle exists in the element. The code to check if the handle exists is executed before my directives template is rendered thus the handle is not found and the item does not have the handle that I wish it to have.

I went about fixing this is in a hackish manner using $timeout. By setting the timeout to 0 it forces the execution of the handle check to occur after the template is rendered

          this.enable = function () {
            if (enabled === true) {
              return;
            }

            enabled = true;

            // timeout required for some template rendering
            $el.ready(function () {
              $timeout(function () {

                if (enabled !== true) {
                  return;
                }

                // disable any existing draghandles
                for (var u = 0, ul = unifiedInputs.length; u < ul; ++u) {
                  unifiedInputs[u].disable();
                }
                unifiedInputs = [];

                if (gridster.draggable && gridster.draggable.handle) {
                  $dragHandles = angular.element($el[0].querySelectorAll(gridster.draggable.handle));
                  if ($dragHandles.length === 0) {
                    // fall back to element if handle not found...
                    $dragHandles = $el;
                  }
                } else {
                  $dragHandles = $el;
                }

                for (var h = 0, hl = $dragHandles.length; h < hl; ++h) {
                  unifiedInputs[h] = new GridsterTouch($dragHandles[h], mouseDown, mouseMove, mouseUp);
                  unifiedInputs[h].enable();
                }
              }, 0);
            });
          };

[brendanoffer]

Just noticied that the configuration you posted is incorrect as well. It should look something like...

    $scope.gridsterOptions = {
      draggable: {
        enabled: false,
      }
     }

[onemenny]

Having a similar problem: after setting draggable.enabled = true and draggable.handle='.some-class'. clicking the gridster item (any where and not where .some-class is) causes a drag

[Oldwo1f]

+1

[takotuesday]

Even with

  $scope.gridsterOptions = {
      draggable: {
        enabled: false,
      }
     }

My items are still dragable unfortunately

[goldenis]

draggable.enabled = false is working for me.

<div ng-controller="controller">
    <div gridster="gridsterOpts">
        <ul>
            ...
        </ul>
    </div>
</div>

Here is the code snippet I've used.

[mohamedsaleh1984]

When you log the grid object, you will notice drag_api object set disabled to true and it will work.

$grid.drag_api.disabled = true;