react-free-draggable

English | 中文说明

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

import Draggable from 'react-free-draggable';

<div className="boxs" style={{ display: 'inline-block', width: '500px', background: "red" }}>
    <Draggable
        bounds=".boxs"
        scale={1}
        >
            <div style={{ display: "inline-block" }}>
                <div className="handle" style={{ display: "inline-block", width: "80px",background: "blue", cursor: "pointer", height: "100%" }} onClick={this.clickToast}>
                    The Dragging
                </div>
            </div>
    </Draggable>
</div>

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 |