React.js使用React-grid-layout点击可拖拽块及内部按钮出现抖动如何解决

这个抖动本质是点击操作触发了组件的拖拽初始化逻辑，mouseup时又自动取消拖拽，导致出现短暂的位置偏移。可以通过以下几种方法解决： #

方法1：调整拖拽触发阈值（最优先尝试） #

给GridLayout组件配置distance属性，指定鼠标按下后移动超过指定像素才触发拖拽，避免纯点击操作触发拖拽逻辑：

import GridLayout from 'react-grid-layout';

function YourComponent() {
  return (
    <GridLayout
      className="layout"
      cols={12}
      rowHeight={30}
      width={1200}
      {/* 配置为点击后移动超过5px才触发拖拽，可根据实际使用调整数值 */}
      distance={5}
    >
      {/* 你的瓦片内容 */}
    </GridLayout>
  )
}

方法2：指定禁止触发拖拽的元素 #

如果是点击瓦片内的按钮、输入框等交互元素时出现抖动，可通过cancel属性配置不需要触发拖拽的元素选择器，让这些元素的点击事件不会触发拖拽初始化：

<GridLayout
  {/* 其他原有配置 */}
  {/* 可根据你的业务场景添加自定义类名的元素 */}
  cancel=".custom-btn, input, textarea, button, select, option, [contenteditable='true']"
>
  <div key="a">
    <button className="custom-btn">Set Alarm</button>
  </div>
</GridLayout>

方法3：子元素阻止鼠标事件冒泡 #

如果个别特殊元素无法通过cancel属性匹配，可以直接给该元素添加onMouseDown事件阻止事件向上传播到拖拽容器：

<button 
  onClick={handleSetAlarm}
  onMouseDown={e => e.stopPropagation()}
>
  Set Alarm
</button>

方法4：CSS兼容处理 #

如果上述方法都无效，可添加CSS禁用非拖拽状态下的位置过渡，避免布局计算导致的跳动：

.react-grid-item:not(.react-grid-item-dragging) {
  transition: none !important;
}

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