Muuri拖拽功能在Mac Safari中无法正常归位的技术咨询

算力阿峰

2026-5-12

Muuri拖拽在Mac Safari中失效：卡片无法自动替换归位的解决方案

这个问题我之前也碰到过，属于Muuri后续版本引入的Mac Safari特定兼容性bug——毕竟Chrome/Firefox里功能正常，且0.4.0版本能完美运行，说明是新版本的拖拽逻辑没适配Safari的事件处理机制。下面给你几个可行的解决思路：

一、最直接的临时方案：回退到稳定兼容版本

既然已经确认Muuri@0.4.0可以解决这个问题，直接回退版本是最快的办法：

npm install muuri@0.4.0 --save

初始化代码保持你原来的写法就行：

const grid = new Muuri(".grid", { dragEnabled: true });

二、适配新版本的修复方案

如果你需要用Muuri的新特性，不想回退版本，可以试试这些调试修复步骤：

显式启用拖拽排序配置
新版本可能默认的拖拽交换逻辑在Safari下没触发，手动开启dragSort并调整触发阈值：

const grid = new Muuri(".grid", {
  dragEnabled: true,
  dragSort: {
    enabled: true,
    threshold: 5 // 可根据需求调整触发交换的距离阈值
  }
});

添加Safari专属的拖拽结束重排补丁
强制在Safari下拖拽结束后触发网格的刷新与重排，补上没自动执行的布局逻辑：

const grid = new Muuri(".grid", { dragEnabled: true });

// 检测Safari浏览器，拖拽结束后强制刷新布局
grid.on("dragEnd", () => {
  if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
    grid.refreshItems();
    grid.layout();
  }
});

排查事件处理逻辑差异
要是上面的方法没用，可以去Muuri源码里查看拖拽相关的事件函数（比如_onDragMove、_onDragEnd），Safari对pointer-events、clientX/clientY的处理和Chromium系浏览器有差异，可能新版本的坐标计算或事件监听逻辑没适配这种差异。