react-draggable-resizable

React Component for draggable and resizable component

安装

使用npm

1npm install react-draggable-resizable --save

使用yarn

1yarn add react-draggable-resizable

基本使用

1import React from 'react'
2import ReactDOM from 'react-dom'
3import ReactDraggableResizable from 'react-draggable-resizable'
4
5class App extends React.Component {
6    constructor(props) {
7        super(props)
8        this.state = {
9            width: 0,
10            height: 0,
11            left: 0,
12            right: 0
13        }
14    }
15
16    onDrag(left, top) {
17        this.setState({
18            left,
19            top
20        })
21    }
22
23    onResize(left, top, width, height) {
24        this.setState({
25            left, 
26            top,
27            width,
28            height
29        })
30    }
31
32    render() {
33        const { left, top, width, height } = this.state
34        return (
35            <ReactDraggableResizable
36                w={200}
37                h={200}
38                dragging={this.onDrag.bind(this)}
39                resizing={this.onResize.bind(this)}
40            >
41                <div>
42                    <div>left: {left}</div>
43                    <div>top: {top}</div>
44                    <div>width: {width}</div>
45                    <div>height: {height}</div>
46                </div>
47            </ReactDraggableResizable>
48        )
49    }
50}
51
52ReactDOM.render(<App />, document.getElementById('app'))

Props

active

• Type: Boolean
• Required: false
• Default: false

用于控制组件的状态

1<ReactDraggableResizable active={true}></ReactDraggableResizable>

draggable

• Type: Boolean
• Required: false
• Default: true

控制组件是否能够拖动

1<ReactDraggableResizable draggable={false}></ReactDraggableResizable>

resizable

• Type: Boolean
• Required: false
• Default: true

控制组件是否能够缩放

w

• Type: Number
• Required: false
• Default: 200

拖动元素的初始化宽度

1<ReactDraggableResizable w={200}></ReactDraggableResizable>

h

• Type: Number
• Required: false
• Default: 200

拖动元素的初始化高度

1<ReactDraggableResizable h={200}></ReactDraggableResizable>

minw

• Type: Number
• Required: false
• Default: 50

拖动元素的最小宽度

1<ReactDraggableResizable minw={50}></ReactDraggableResizable>

minh

• Type: Number
• Required: false
• Default: 50

拖动元素的最小高度

1<ReactDraggableResizable minh={50}></ReactDraggableResizable>

x

• Type: Number
• Required: false
• Default: 0

拖动元素初始left值

1<ReactDraggableResizable x={50}></ReactDraggableResizable>

y

• Type: Number
• Required: false
• Default: 0

拖动元素初始top值

1<ReactDraggableResizable y={50}></ReactDraggableResizable>

z

• Type: String | Number
• Required: false
• Default: auto

拖动元素的zIndex值

1<ReactDraggableResizable z={50}></ReactDraggableResizable>

handles

• Type: Array
• Required: false
• Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']

控制元素可以拖动的方向

• tl - 左上角
• tm - 上边的中部
• tr - 右上角
• mr - 右边的中部
• br - 右下角
• bm - 下边的中部
• bl - 左下角
• ml - 左边的中部

1<ReactDraggableResizable handles={['tm', 'tr', 'tl']}></ReactDraggableResizable>

axis

• Type: String
• Required: false
• Default: both

控制拖动元素的拖动的方向

1<ReactDraggableResizable axis='x'></ReactDraggableResizable>

grid

• Type: Array
• Required: false
• Default: [1,1]

控制拖动元素在x和y轴的每次移动的距离

1<ReactDraggableResizable grid={[10, 5]}></ReactDraggableResizable>

parent

• Type: Boolean
• Required: false
• Default: false

控制拖动元素是否只能在父节点中移动和缩放

1<ReactDraggableResizable parent={true}></ReactDraggableResizable>

maximize

• Type: Boolean
• Required: false
• Default: false

设置为true，则双击拖动元素，充满父元素

1<ReactDraggableResizable maximize={true}></ReactDraggableResizable>

activated

• Type: Function
• Required: false
• Parameters: 无

当拖动元素被点击的时候调用

1<ReactDraggableResizable
2	activated={() => {console.log('Element Clicked!!!')}}  
3>
4
5</ReactDraggableResizable>

deactivated

• Type: Function
• Required: false
• Parameters: 无

点击拖动元素之外的区域，拖动元素失去焦点的时候调用

1<ReactDraggableResizable
2	deactivated={() => {console.log('deactivated')}}  
3>
4
5</ReactDraggableResizable>

resizing

• Type: Function
• Required: false
• Parameters:
  • left 拖动元素的left值
  • top 拖动元素的top值
  • width 拖动元素的宽度
  • height 拖动元素的高度

当拖动元素被缩放的时候被调用

1<ReactDraggableResizable
2	resizestop={(left, top, width, height) => {console.log(`left: ${left}, top: ${top}, width: ${width}, height: ${height}`)}}>
3
4</ReactDraggableResizable>

resizestop

• Type: Function
• Required: false
• Parameters:
  • left 拖动元素的left值
  • top 拖动元素的top值
  • width 拖动元素的宽度
  • height 拖动元素的高度

当拖动元素缩放停止的时候被调用

1<ReactDraggableResizable
2	resizestop={(left, top, width, height) => {console.log(`left: ${left}, top: ${top}, width: ${width}, height: ${height}`)}}>
3
4</ReactDraggableResizable>

dragging

• Type: Function
• Required: false
• Parameters:
  • left 拖动元素的left值
  • top 拖动元素的top值

当拖动元素被拖动的时候调用

1<ReactDraggableResizable dragging={(left, top) => {console.log(`left: ${left}, top: ${top}`)}}>
2
3</ReactDraggableResizable>

dragstop

• Type: Function
• Required: false
• Parameters:
  • left 拖动元素的left值
  • top 拖动元素的top值

当拖动元素拖动停止的时候调用

1<ReactDraggableResizable dragstop={(left, top) => {console.log(`left: ${left}, top: ${top}`)}}>
2
3</ReactDraggableResizable>