如何修改GridStack调整widget尺寸时的吸附步进间隔

可以实现。你现在拖拽调整尺寸时档位间隔大，本质是初始化时网格拆分粒度太粗，加上自定义CSS硬编码了4列场景的固定样式，导致只能按大档位吸附。

核心逻辑 #

GridStack是基于网格单元格做对齐吸附的，widget尺寸、位置调整的最小单位就是1个网格单元格。整个布局区域拆的单元格越多，单个单元格尺寸越小，调整时的吸附间隔就越小，精度自然越高。

修改步骤 #

1. 修改JS初始化配置 #

你现在主网格配置里写了width:4，意思是横向总共拆成4列，height:4是纵向拆成4行，单格宽度占容器25%、高度110px，步长当然大。
根据你要的精度调大网格行列数就行，举个例子，要是想把调整步长缩到当前的1/4，就把行列数都放大4倍，同步调整cellHeight保证网格总高度和容器适配：

var options = {
  float: true,
  width: 16, // 原值为4，横向拆为16列，单格宽度是容器1/16，步长缩为原来1/4
  height: 16, // 原值为4，纵向拆为16行，纵向步长同步缩为原来1/4
  animate: true,
  always_show_resize_handle: true,
  cellHeight: 27.5, // 原值为110，纵向格数翻了4倍，单格高度对应缩为1/4，总高度和原来效果一致
  verticalMargin: 18,
  horizontalMargin: 9,
  placeholder_class: 'grid-stack-placeholder',
  acceptWidgets: '.grid-stack-item'
};

要更高精度就继续往大调width和height就行，比如设width:100就能做到以容器宽度1%为步长调整。侧边栏不需要细调就保持原配置，要调的话逻辑一样。

2. 删掉硬编码的CSS规则 #

你现在CSS里写死了4列场景下不同宽度、偏移对应的样式，这些规则会覆盖GridStack自动算出来的动态内联样式，必须删掉，不然改了JS也不生效，要删的代码如下：

.grid-stack .grid-stack-item[data-gs-width="4"] { width: 100% }
.grid-stack .grid-stack-item[data-gs-width="3"] { width: 75% }
.grid-stack .grid-stack-item[data-gs-width="2"] { width: 50% }
.grid-stack .grid-stack-item[data-gs-width="1"] { width: 25% }
.grid-stack .grid-stack-item[data-gs-x="3"] { left: 75% }
.grid-stack .grid-stack-item[data-gs-x="2"] { left: 50% }
.grid-stack .grid-stack-item[data-gs-x="1"] { left: 25% }

GridStack本身会根据你设置的网格数自动计算每个widget的宽度、偏移，生成内联样式，不需要手动写CSS匹配不同的宽度属性。

补充说明 #

GridStack本身不支持完全无吸附的像素级自由调整，所有拖拽、缩放都会对齐到最小网格单元格，只要网格密度设的足够高，视觉上和自由调整几乎没区别。

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