0.0.4-1 • Published 4 years ago
react-dragable v0.0.4-1
react-dragable
自己写的拖拽工具
示例
代码片段
import React from "react";
import "./App.css";
import Draggable from "react-dragable";
class Scene extends Component<{}, { rect: Rect }> {
constructor(props: any) {
super(props);
this.state = {
rect: { width: 200, height: 200, x: 200, y: 200, rotate: 0 }
};
}
render() {
const { rect } = this.state;
return (
<div className="scene">
<Dragable
rect={rect}
onChange={(rect) => {
this.setState((state) => ({
rect: {
...state,
...rect
}
}));
}}>
{({ width, height }) => {
const computedStyle = { width, height, backgroundColor: "#f00" };
return <div style={computedStyle}></div>;
}}
</Dragable>
</div>
);
}
}
export default App;
属性
名称 | 类型 | 描述 |
---|---|---|
rect | Rect | |
children | (rect:Rect)=>ReactNode |
Rect
名称 | 类型 | 描述 |
---|---|---|
x | number | 横坐标 |
y | number | 纵坐标 |
width | number | 宽度 |
height | number | 高度 |
rotate | number | 旋转角度 |
参考资料
rotate-resize 旋转拖拽算法