awesome-repositories.com
博客
MCP
awesome-repositories.com

通过 AI 驱动的搜索,发现最优秀的开源仓库。

探索精选搜索开源替代品自托管软件博客网站地图
项目MCP 服务器关于排名机制媒体报道
法律隐私政策服务条款
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
haltu avatar

haltu/muuri

0
View on GitHub↗
muuri.dev↗

Muuri

Muuri is a JavaScript grid layout library and draggable UI framework used to create responsive grids with drag-and-drop reordering, sorting, and animated filtering. It features a nested grid system that allows full grid instances to be embedded inside other grid items to create hierarchical structures.

The library uses a web worker layout engine to offload heavy coordinate calculations to background threads, maintaining interface responsiveness during complex rearrangements.

The system provides interactive capabilities for moving items between multiple containers, filtering visibility based on specific criteria, and reordering elements via custom comparator functions. Layouts are managed using a bin-packing algorithm to minimize gaps and utilize CSS transforms for high-performance animations during transitions.

AI 搜索

探索更多 awesome 仓库

用简单的语言描述您的需求 —— AI 将根据相关性为您从数千个精选开源项目中进行排序。

Start searching with AI

Features

  • Draggable Layout Elements - Provides a framework for creating UI components that can be manually repositioned within a grid via drag-and-drop.
  • Responsive Grid Layouts - Provides a responsive grid layout system that automatically adapts item positions to varying screen sizes and container dimensions.
  • Grid Packing Algorithms - Implements algorithms for automatically arranging and compacting grid items to fill empty space and minimize gaps.
  • Asynchronous Layout Calculation - Performs complex layout calculations on background threads to ensure smooth animations and no main-thread freezing.
  • Web Worker Layout Computation - Offloads heavy coordinate calculations to background web workers to maintain a responsive user interface.
  • Cascading Grid Libraries - A JavaScript library specifically designed to create responsive, gapless grids with varying item heights.
  • CSS Transform Animations - Uses CSS translate transforms to achieve high-performance animations during grid layout shifts.
  • Drag and Drop Libraries - Provides a library for implementing drag-and-drop interactions to detect gestures and trigger grid reordering.
  • Drag and Drop Interactions - Implements logic and constraints for manually reordering elements or moving them between containers via drag-and-drop.
  • Nested Grid Structures - Supports embedding full grid instances within other grid cells to create hierarchical layout structures.
  • Layout Animation Engines - Implements a layout-aware animation engine that smoothly transitions elements between different positions and visibility states.
  • Pointer Event Handlers - Manages raw pointer, touch, and mouse events to track movement and trigger grid reordering.
  • Background Layout Engines - Uses a background-threaded engine to calculate grid coordinates, ensuring the main interface remains responsive.
  • Main Thread Offloading - Offloads heavy grid coordinate calculations to background web workers to maintain interface responsiveness.
  • UI Element Sorting - Implements ordering logic for visual DOM elements using custom comparison functions.
  • CSS Class-Based Visibility Toggling - Provides a system to toggle item visibility using CSS classes combined with smooth animated transitions.
  • Multi-Container Drag and Drop - Allows moving items between separate grids with reordering capabilities across multiple containers.
  • Dynamic Layout Filtering - Provides layouts that can show or hide items based on specific criteria with smooth animated transitions.
  • Cross-Container Transfers - Enables moving elements across different grids with integrated auto-scrolling during the transfer process.
  • Interactive Element Sorting - Allows user-driven reordering of grid elements via direct manipulation to define a specific sequence.
  • Custom Sort Comparators - Provides the ability to define custom comparison functions for sorting grid items.
  • Filtered Grid Reordering - Hides or reorders items based on specific criteria and animates the transition to the new layout.
  • Visibility Toggles - Implements mechanisms for toggling the visibility of grid components while preserving their layout state.
  • Off-Main-Thread Layouts - Maintains interface responsiveness during large rearrangements by managing complex grid calculations off the main thread.
10,954 星标·650 分支·JavaScript·MIT·7 次浏览

Star 历史

haltu/muuri 的 Star 历史图表haltu/muuri 的 Star 历史图表

常见问题解答

haltu/muuri 是做什么的?

Muuri is a JavaScript grid layout library and draggable UI framework used to create responsive grids with drag-and-drop reordering, sorting, and animated filtering. It features a nested grid system that allows full grid instances to be embedded inside other grid items to create hierarchical structures.

haltu/muuri 的主要功能有哪些?

haltu/muuri 的主要功能包括:Draggable Layout Elements, Responsive Grid Layouts, Grid Packing Algorithms, Asynchronous Layout Calculation, Web Worker Layout Computation, Cascading Grid Libraries, CSS Transform Animations, Drag and Drop Libraries。

haltu/muuri 有哪些开源替代品?

haltu/muuri 的开源替代品包括: gridstack/gridstack.js — gridstack.js is a JavaScript grid layout library and responsive dashboard framework used to create interactive… mzabriskie/react-draggable — react-draggable is a UI interaction library that provides core primitives and components for adding tactile movement… facebookarchive/asyncdisplaykit — AsyncDisplayKit is an asynchronous UI framework and performance library for iOS. It provides a collection of… patrickkunka/mixitup — Mixitup is a dependency-free DOM element animation library and grid layout engine. It serves as a client-side content… tahash/swapy — Swapy is a drag and drop layout library designed to manage the spatial arrangement of UI components. It functions as… clauderic/dnd-kit — This project is a modular toolkit for building accessible, component-based drag-and-drop interfaces in React. It…

Muuri 的开源替代方案

相似的开源项目,按与 Muuri 的功能重合度排序。
  • gridstack/gridstack.jsgridstack 的头像

    gridstack/gridstack.js

    8,972在 GitHub 上查看↗

    gridstack.js is a JavaScript grid layout library and responsive dashboard framework used to create interactive interfaces with draggable and resizable elements. It functions as a drag-and-drop layout manager and a JSON-serializable layout engine, allowing user-defined interface states to be persisted and restored. The library distinguishes itself through a touch-enabled grid interface and a responsive system that automatically adjusts item placement based on screen breakpoints. It features a collision-based layout engine that manages overlapping coordinates to shift or swap elements, alongsid

    TypeScriptangulardashboardgrid
    在 GitHub 上查看↗8,972
  • mzabriskie/react-draggablemzabriskie 的头像

    mzabriskie/react-draggable

    9,289在 GitHub 上查看↗

    react-draggable is a UI interaction library that provides core primitives and components for adding tactile movement and coordinate-based positioning to web elements. It serves as a tool for making user interface elements movable via mouse or touch interactions within React applications. The library supports the implementation of custom drag handles, allowing the initiation of movement to be restricted to specific child elements identified by CSS selectors. It also provides programmatic drag state management, enabling developers to control element positioning or use callbacks for movement wit

    JavaScript
    在 GitHub 上查看↗9,289
  • facebookarchive/asyncdisplaykitfacebookarchive 的头像

    facebookarchive/AsyncDisplayKit

    13,345在 GitHub 上查看↗

    AsyncDisplayKit is an asynchronous UI framework and performance library for iOS. It provides a collection of performant alternatives to standard views, allowing developers to build responsive interfaces by offloading layout and rendering tasks to background threads. The framework is centered around a declarative layout engine based on a flexbox model, which calculates element positions and sizes asynchronously. It utilizes a node-based abstraction to wrap native views, enabling the instantiation and configuration of UI hierarchies on background threads to prevent main thread blocking. The sy

    Objective-C++
    在 GitHub 上查看↗13,345
  • patrickkunka/mixituppatrickkunka 的头像

    patrickkunka/mixitup

    4,543在 GitHub 上查看↗

    Mixitup is a dependency-free DOM element animation library and grid layout engine. It serves as a client-side content filter and data-driven UI controller designed to manage the smooth visual transition of HTML elements during insertion, removal, and sorting operations. The system specializes in creating interactive gallery interfaces and dynamic content filtering. It allows for the reorganization of elements using custom attributes or random sequences, while synchronizing the arrangement and visibility of interface elements with an underlying data model. Beyond filtering and sorting, the li

    JavaScriptanimationdom-manipulationfilter
    在 GitHub 上查看↗4,543
  • 查看 Muuri 的所有 30 个替代方案→