Hey there, I get it—dealing with older library versions can be tricky when the docs don’t line up with what’s actually supported! GridStack 0.2.6 is a pretty old release (circa 2015), and some of the data-gs-* attributes you tried were actually added in later updates. Let’s walk through the reliable fixes for this specific version:

1. Disable All Widgets Globally #

If you want every widget in your grid to be non-draggable and non-resizable, use the static option when initializing GridStack. This is fully supported in 0.2.6:

$(document).ready(function() {
  $('.grid-stack').gridstack({
    static: true
  });
});

This locks down the entire grid so no widgets can be moved or resized at all.

2. Disable Individual Widgets #

If you only need to restrict specific widgets, you have two solid options here:

Option A: Set Properties During Widget Creation #

When adding a widget via JavaScript, pass the noMove and noResize parameters directly:

$('.grid-stack').gridstack().addWidget(
  $('<div><div class="grid-stack-item-content"></div></div>'),
  {
    x: 0,
    y: 0,
    width: 2,
    height: 2,
    noMove: true,   // Turn off dragging
    noResize: true  // Turn off resizing
  }
);

Option B: Disable After Initialization #

For widgets already in your DOM, use GridStack’s disable API method to lock down a specific element:

// Replace #my-widget with your widget's actual selector
$('.grid-stack').data('gridstack').disable($('#my-widget'));

This method blocks both movement and resizing for the targeted widget.

3. Double-Check DOM Initialization Order #

Make sure your GridStack code runs after the DOM is fully loaded. Wrapping it in $(document).ready() ensures all your widget elements exist when GridStack reads their properties—this is a common reason attributes might not get picked up.

Quick Note on HTML Data Attributes #

In 0.2.6, the restriction attributes don’t use the gs- prefix. If you prefer setting rules directly in HTML, use these instead:

<div class="grid-stack-item" 
     data-x="0" data-y="0" 
     data-width="2" data-height="2"
     data-no-move="true" 
     data-no-resize="true">
  <div class="grid-stack-item-content"></div>
</div>

Just remember to initialize GridStack after this element is rendered in the DOM.

内容的提问来源于stack exchange，提问作者Joe