react-draggable-resizable


> React Component for draggable and resizable component

$3

使用npm

``bash
npm install react-draggable-resizable --save
`

使用yarn

`bash
yarn add react-draggable-resizable
`

$3

`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import ReactDraggableResizable from 'react-draggable-resizable'

class App extends React.Component {
constructor(props) {
super(props)
this.state = {
width: 0,
height: 0,
left: 0,
right: 0
}
}

onDrag(left, top) {
this.setState({
left,
top
})
}

onResize(left, top, width, height) {
this.setState({
left,
top,
width,
height
})
}

render() {
const { left, top, width, height } = this.state
return (
w={200}
h={200}
dragging={this.onDrag.bind(this)}
resizing={this.onResize.bind(this)}
>


ReactDOM.render(, document.getElementById('app'))
`

$3

##### active

- Type: Boolean
- Required: false
- Default: false

用于控制组件的状态

`jsx

`

##### draggable

- Type: Boolean
- Required: false
- Default: true

控制组件是否能够拖动

`jsx

`

##### resizable

- Type: Boolean
- Required: false
- Default: true

控制组件是否能够缩放

##### w

- Type: Number
- Required: false
- Default: 200

拖动元素的初始化宽度

`jsx

`

##### h

- Type: Number
- Required: false
- Default: 200

拖动元素的初始化高度

`jsx

`

##### minw

- Type: Number
- Required: false
- Default: 50

拖动元素的最小宽度

`jsx

`

##### minh

- Type: Number
- Required: false
- Default: 50

拖动元素的最小高度

`jsx

`

##### x

- Type: Number
- Required: false
- Default: 0

拖动元素初始left值

`jsx

`

##### y

- Type: Number
- Required: false
- Default: 0

拖动元素初始top值

`jsx

`

##### z

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

拖动元素的zIndex值

`jsx

`

##### handles

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

控制元素可以拖动的方向

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

`jsx

`

##### axis

- Type: String
- Required: false
- Default: both

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

`jsx

`

##### grid

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

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

`jsx

`

##### parent

- Type: Boolean
- Required: false
- Default: false

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

`jsx

`

##### maximize

- Type: Boolean
- Required: false
- Default: false

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

`jsx

`

##### activated

- Type: Function
- Required: false
- Parameters: 无

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

`jsx
activated={() => {console.log('Element Clicked!!!')}}
>


`

##### deactivated

- Type: Function
- Required: false
- Parameters: 无

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

`jsx
deactivated={() => {console.log('deactivated')}}
>


`

##### resizing

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

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

`jsx
resizestop={(left, top, width, height) => {console.log(left: ${left}, top: ${top}, width: ${width}, height: ${height})}}>


`

##### resizestop

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

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

`jsx
resizestop={(left, top, width, height) => {console.log(left: ${left}, top: ${top}, width: ${width}, height: ${height})}}>


`

##### dragging

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

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

`jsx
{console.log(left: ${left}, top: ${top})}}>


`

##### dragstop

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

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

`jsx
{console.log(left: ${left}, top: ${top})}}>


``