这个项目能做什么

React-Draggable 是一个用于让元素可拖拽的 React 组件库。它隶属于 react-grid-layout 组织，并以 react-draggable 的名称发布在 npm 上。 该库提供两个组件。`<Draggable>` 包裹现有元素，并为其扩展拖拽事件处理器和样式，通过 CSS Transforms 移动元素，因此无论元素当前的定位方式如何都可以被拖拽。它不会在 DOM 中创建包裹元素。`<DraggableCore>` 是面向需要完全控制的用户的更底层选项：它提供拖拽回调，但不管理状态或样式，也不设置 transform，把定位工作留给开发者。README 指出 React-Resizable 和 React-Grid-Layout 是 DraggableCore 的使用示例。 `<Draggable>` 的关键 props 包括 axis（both、x、y、none）、bounds（parent、CSS 选择器，或 left/top/right/bottom 对象）、cancel 和 handle CSS 选择器、grid 吸附、用于受控用法的 position、positionOffset、用于被 transform 的父元素的 scale、disabled，以及回调 onStart、onDrag、onStop 和 onMouseDown。传给处理器的 DraggableData 包含 node、x、y、deltaX、deltaY、lastX 和 lastY。从 onStart 返回 false 会取消拖拽。在 `<Draggable>` 上设置 className、style 或 transform 是错误的；这些应设置在子元素上。 README 记录了兼容性：4.x 版本支持 React 16.3+，3.x 支持 React 15–16，2.x 支持 React 0.14–15。包含 TypeScript 类型。安装通过 npm 或 yarn，并提供 ES module 和 CommonJS 的导入示例。 一个值得注意的章节介绍了 nodeRef：传入 nodeRef prop 可以避免 React Strict Mode 中 ReactDOM.findDOMNode() 的弃用警告，README 展示了如何为自定义组件同时转发 ref 和 props。另一章节解释了受控与非受控用法，展示了如何在仍然使用 Draggable 状态管理的同时传入 position prop 以进行程序化重新定位。 Content Security Policy 章节解释了 react-draggable 会在首次拖拽时向 document head 注入一个小的 style 元素（enableUserSelectHack 行为，默认开启），以防止拖拽时选中文本。在 style-src 中没有 'unsafe-inline' 的严格 CSP 下，这会被阻止。文档给出了三种补救方法：传入 nonce prop、依赖 webpack 的 __webpack_nonce__ 全局回退，或设置 enableUserSelectHack={false} 并将两条选择规则添加到自己的样式表中。nonce 仅在元素首次创建时读取，并且页面上每个 Draggable/DraggableCore 共享同一个元素。 该仓库包含演示站点、变更日志、CI 工作流，以及涵盖 yarn dev、yarn test 和使用 make 目标的发布清单的贡献说明。项目采用 MIT 许可证。