# react-free-draggable > transform实现的自由拖拽组件 Latest version **8.1.2** (published 2023-08-28) · MIT license · 0 weekly downloads ## Install ```sh npm install react-free-draggable pnpm add react-free-draggable yarn add react-free-draggable bun add react-free-draggable ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 8.1.2 | | Published | 2023-08-28 | | First published | 2021-02-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 7 | | Unpacked size | 106.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | zhanglei | | Maintainers | mezhanglei | | Keywords | react-draggable, react-free-draggable, react-drag | ## Links - npm: https://www.npmjs.com/package/react-free-draggable - Repository: https://github.com/mezhanglei - npm.io page: https://npm.io/package/react-free-draggable ## Dependencies (7) - [antd](https://npm.io/package/antd.md) ^4.20.2 - [react](https://npm.io/package/react.md) ^16.14.0 - [history](https://npm.io/package/history.md) ^5.0.0 - [react-dom](https://npm.io/package/react-dom.md) ^16.14.0 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [react-loadable](https://npm.io/package/react-loadable.md) ^5.5.0 - [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0 ## Recent versions - 8.1.2 (latest) — 2023-08-28 - 8.1.1 — 2023-06-18 - 8.1.0 — 2023-01-08 - 8.0.6 — 2022-12-24 - 8.0.5 — 2022-12-13 - 8.0.4 — 2022-12-02 - 8.0.3 — 2022-12-02 - 8.0.2 — 2022-12-02 - 8.0.1 — 2022-12-01 - 8.0.0 — 2022-12-01 - 7.1.9 — 2022-11-21 - 7.1.8 — 2022-07-08 - 7.1.7 — 2022-07-08 - 7.1.6 — 2022-07-08 - 7.1.4 — 2022-04-15 - … 42 more at https://npm.io/package/react-free-draggable/versions ## README # react-free-draggable English | [中文说明](./README_CN.md) [![Version](https://img.shields.io/badge/version-8.1.2-green)](https://www.npmjs.com/package/react-free-draggable) # Introduction? Using the free drag and drop component of Transform, the drag process does not affect the page layout # version8.x - Remove `ReactDOM.findDOMNode`, change to ref reference to get the dom. if children is a function component, you need to wrap it with `React.forwardRef`. - Change the parameters of `onStart`, `onMove`, `onEnd` callbacks - ~~`fixed`~~ property to `resetOnEnd` property to indicate whether to restore the position after the drag end - ~~`childProps`~~ property is deprecated - ~~`childProps`~~ property is deprecated - 8.1.0 ~~`showLayer`~~ and ~~`layerStyle`~~ deprecated. # Draggbale - Using `tranform` to realize element drag and drop movement, high performance, smooth - You can set the drag bounds `bounds` to limit the scope of the drag by setting the parent element, Full-screen drag is the default - Other properties of the wrapped `props. children` (properties that are not drag related) are not affected by `react-free-draggable`. It's still the same as not being wrapped - When set to `position: absolute`, you can set the `x` and `y` attributes inside the `bounds` element to control the position of the element # DraggableEvent - Provide only drag event callbacks and parameters for dragging - The `eventBounds` property can limit the extent of the event object's activity # matters 1. children can not be inline elements, because transform does not work on inline elements! 2. `props.children` is restricted to a single closing tag! 3. `x` and `y` attributes are referenced to the `bounds` element. ### install ``` npm install --save react-free-draggable # or yarn add react-free-draggable ``` ### example ```javascript import Draggable from 'react-free-draggable';
The Dragging
``` ## Attributes | name | type | defaultValue | description | | ----------------------------- | --------------------- | -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | | handle | `string / HTMLElement` | - | Drag the class selector or element for the element | | filter | `string / HTMLElement` | - | A selector or element that does not allow drag and drop | | enableUserSelectHack | `boolean` | - | Allows you to add selected styles | | grid | `[number, number]` | - | Set X, Y direction amplitude, how much to move the target | | disabled | `boolean` | - | disabled drag | | allowAnyClick | `boolean` | - | Indicates that drag is allowed without a left mouse click | | onStart | `function` | - | the start event | | onMove | `function` | - | the dragging event | | onEnd | `function` | - | the end event | | scale | `number` | 1 | Drag sensitivity | | x | `number` | - | The position of the x-axis when the element is `position: absolute`. | | y | `number` | - | The position of the y-axis when the element is `position: absolute`. | | direction | `['vertical','horizontal']` | - | the direction of drag and drop | | positionOffset | `{x: number, y: number}` | - | Transform position increment | | bounds | `string / HTMLElement / {left: number, right: number, top: number, bottom: number, element: string / HTMLElement }` | - | The range within the element, if it is element, the position is range in element, but if it is object, it is the range of the `element` element | | resetOnEnd | `boolean` | - | Restore position when drag end | --- _Source: https://npm.io/package/react-free-draggable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._