react-free-draggable v8.1.2

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