Muuri网格布局系统事件全解析

Muuri网格布局系统事件全解析

muuri Infinite responsive, sortable, filterable and draggable layouts 项目地址: https://gitcode.com/gh_mirrors/mu/muuri

前言

Muuri作为一款强大的响应式网格布局库，提供了丰富的事件系统来帮助开发者监控和响应网格的各种状态变化。本文将全面解析Muuri网格布局系统中的所有事件类型，帮助开发者更好地理解和利用这些事件来构建交互丰富的网格应用。

基础事件

synchronize事件

当调用grid.synchronize()方法同步网格项后触发。这个事件通常用于确认网格项已经完成同步操作。

grid.on('synchronize', function() {
  console.log('网格项同步完成');
});

布局相关事件

layoutStart事件

在布局计算开始前触发，此时：

• 新布局已生成
• 内部项位置已更新
• 网格元素尺寸已更新

grid.on('layoutStart', function(items, isInstant) {
  console.log('布局开始，共'+items.length+'个项', isInstant ? '即时布局' : '动画布局');
});

layoutEnd事件

在布局成功完成后触发。如果布局过程中被中断（通过调用新的grid.layout()），则不会触发此事件，而是触发layoutAbort事件。

grid.on('layoutEnd', function(items) {
  console.log('布局完成，有效项：', items.filter(item => item.isActive()));
});

layoutAbort事件

当新的布局过程打断了当前正在进行的布局时触发。

grid.on('layoutAbort', function(items) {
  console.warn('布局被中断，受影响项：', items.length);
});

项管理事件

add事件

当通过grid.add()添加新项后触发。

grid.on('add', function(items) {
  console.log('新增项：', items.map(item => item.getElement().id));
});

remove事件

当通过grid.remove()移除项后触发。

grid.on('remove', function(items, indices) {
  console.log('移除项：', items, '位置索引：', indices);
});

显示/隐藏事件

showStart/showEnd事件

分别在显示项操作开始前和完成后触发。

grid.on('showStart', function(items) {
  console.log('准备显示：', items.length+'个项');
});

grid.on('showEnd', function(items) {
  console.log('显示完成：', items.length+'个项');
});

hideStart/hideEnd事件

分别在隐藏项操作开始前和完成后触发。

grid.on('hideStart', function(items) {
  console.log('准备隐藏：', items.length+'个项');
});

grid.on('hideEnd', function(items) {
  console.log('隐藏完成：', items.length+'个项');
});

过滤与排序事件

filter事件

当调用grid.filter()进行过滤后触发。

grid.on('filter', function(shownItems, hiddenItems) {
  console.log('过滤结果 - 显示：', shownItems.length, '隐藏：', hiddenItems.length);
});

sort事件

当调用grid.sort()进行排序后触发。

grid.on('sort', function(currentOrder, previousOrder) {
  console.log('排序变更 - 新顺序：', currentOrder, '旧顺序：', previousOrder);
});

项移动事件

move事件

当项位置发生变化时触发，包括通过grid.move()方法或拖动排序时。

grid.on('move', function(data) {
  console.log(`项${data.item.getElement().id}从位置${data.fromIndex}移动到${data.toIndex}`);
});

跨网格传输事件

send/receive事件

当项从一个网格传输到另一个网格时触发：

• send在发送方网格触发
• receive在接收方网格触发

// 发送方
gridA.on('send', function(data) {
  console.log(`发送项到网格B，位置${data.toIndex}`);
});

// 接收方
gridB.on('receive', function(data) {
  console.log(`从网格A接收项，位置${data.toIndex}`);
});

beforeSend/beforeReceive事件

在传输过程开始时触发，适合在项实际移动前进行预处理。

grid.on('beforeSend', function(data) {
  // 冻结项尺寸等预处理
});

拖拽相关事件

dragInit/dragStart事件

分别在拖拽初始化和开始时触发。

grid.on('dragInit', function(item, event) {
  console.log('开始初始化拖拽', item);
});

grid.on('dragStart', function(item, event) {
  console.log('拖拽开始', item);
});

dragMove/dragScroll事件

在拖拽移动和滚动时持续触发。

grid.on('dragMove', function(item, event) {
  console.log('拖拽移动', event.deltaX, event.deltaY);
});

grid.on('dragScroll', function(item, event) {
  console.log('滚动发生', event.deltaX, event.deltaY);
});

dragEnd/dragReleaseStart/dragReleaseEnd事件

分别在拖拽结束、释放开始和释放完成时触发。

grid.on('dragEnd', function(item, event) {
  console.log('拖拽结束');
});

grid.on('dragReleaseStart', function(item) {
  console.log('开始释放项');
});

grid.on('dragReleaseEnd', function(item) {
  console.log('项释放完成');
});

销毁事件

destroy事件

当网格被销毁时触发。

grid.on('destroy', function() {
  console.log('网格已销毁');
});

最佳实践

1. 性能优化：对于高频事件如dragMove，避免执行耗时操作
2. 状态管理：利用layoutStart和layoutEnd管理布局状态
3. 错误处理：监听layoutAbort处理布局中断情况
4. 动画协调：在beforeSend/beforeReceive中预处理项尺寸

通过合理利用这些事件，开发者可以构建出响应迅速、交互丰富的网格布局应用。Muuri的事件系统为网格的每个关键操作点都提供了监控能力，是实现复杂交互的坚实基础。

muuri Infinite responsive, sortable, filterable and draggable layouts 项目地址: https://gitcode.com/gh_mirrors/mu/muuri