bokuweb/react-resizable-and-movable
React Resizable And Movable
该项目是一个 React UI 交互库和组件几何管理器。它提供了一套工具，用于在 React 应用程序中创建用户可以移动和调整大小的元素。
该库允许自定义交互句柄，支持应用自定义组件、样式或 CSS 类到调整大小句柄，以匹配特定的视觉设计。
该系统通过直接用户交互和程序化几何更新来涵盖元素操作。它包括用于网格吸附、边界约束和锁定纵横比的功能，以控制 UI 组件的位置和大小。
Features
- Draggable and Resizable React Components - Provides React components that make DOM elements draggable and resizable with bounding constraints.
- Drag and Resize Functionality - Makes DOM elements movable by dragging and resizable via their edges or corners.
- React Drag and Resize Libraries - Provides a set of tools for handling drag and drop movements and element scaling in React.
- Programmatic Position and Size - Programmatically controls the position, size and bounding constraints of UI elements.
- Interactive UI Elements - Enables the design of user interfaces where elements can be freely moved and resized.
- Mouse Event Handlers - Tracks mouse movement relative to click positions to calculate real-time element offsets and dimensions.
- Geometry State Management - Triggers component re-renders by updating position and size properties within the internal React state tree.
- Custom Resize Handles - Allows the application of custom components, styles, and CSS classes to resize handles.
- Resize Mapping Logic - Translates interactions on specific element handles into precise dimensional changes.
- Fixed Aspect Ratios - Implements constraints that maintain a constant relationship between width and height during resizing.
- Boundary Validation - Provides logic to validate and prevent elements from crossing specified container boundaries during movement.
- Grid Snapping - Aligns element positions and dimensions to a configurable pixel grid during user interaction.
- Visual Layout Editors - Supports the creation of tools for arranging and scaling components on a canvas.
- Miscellaneous Tools - Resizable and movable component.
