问题描述
在过去的几个小时里，我一直试图寻找一种方法来使 React 组件可拖动和调整大小。 我找到了一种通过使其可拖动的方法，但我找不到一种简单的方法来使其可调整大小：/ 有没有人有任何关于如何使组件可拖动和调整大小的经验？
任何帮助或指示表示赞赏！
1楼
sebastian the crab
12
2015-09-01 05:50:09
使用 react-grid-layout 来解决这个问题。 专门用于调度小部件，用户可以在其中缩放时间块并沿水平时间线拖放它们。
react-grid-layout 提供了一个带有可拖动和可调整大小的小部件以及响应式布局、可选的自动打包等功能的网格。
var ReactGridLayout = require('react-grid-layout');
// React component render function:
render: function() {
return (
<ReactGridLayout className="layout" cols={12} rowHeight={30}>
<div key={1} _grid={{x: 0, y: 0, w: 1, h: 2}}>1</div>
<div key={2} _grid={{x: 1, y: 0, w: 1, h: 2}}>2</div>
<div key={3} _grid={{x: 2, y: 0, w: 1, h: 2}}>3</div>
</ReactGridLayout>
)
}
子节点是可拖动和调整大小的。 在每个子“_grid”道具中定义的布局也可以直接在父“布局”道具上定义：
// React component render function:
render: function() {
// layout is an array of objects, see the demo
var layout = getOrGenerateLayout();
return (
<ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30}>
<div key={1}>1</div>
<div key={2}>2</div>
<div key={3}>3</div>
</ReactGridLayout>
)
}
回调函数可以作为 props 传递给组件。 连接到这些应该允许您定义任何自定义行为：
// Calls when drag starts.
onDragStart: React.PropTypes.func,
// Calls on each drag movement.
onDrag: React.PropTypes.func,
// Calls when drag is complete.
onDragStop: React.PropTypes.func,
// Calls when resize starts.
onResizeStart: React.PropTypes.func,
// Calls when resize movement happens.
onResize: React.PropTypes.func,
// Calls when resize is complete.
onResizeStop: React.PropTypes.func
来自文档的代码示例： :
演示在这里： :
2楼
oldo.nicho
7
2017-10-17 06:12:40
我一直在使用react-rnd并且对它非常满意： :
3楼
Vishnu
4
已采纳
2015-07-26 18:35:31
此答案仅适用于可调整大小的组件。 您可以找到具有这两种功能的其他答案。
'use strict';
var React = require('react/addons');
typeof window !== "undefined" && (window.React = React); // for devtools
typeof window !== "undefined" && (window.Perf = React.addons.Perf); // for devtools
var _ = require('lodash');
var ResizableBox = require('../lib/ResizableBox.jsx');
var Resizable = require('../lib/Resizable.jsx');
require('style!css!../css/styles.css');
var TestLayout = module.exports = React.createClass({
displayName: 'TestLayout',
getInitialState() {
return {width: 200, height: 200};
},
onClick() {
this.setState({width: 200, height: 200})
},
onResize(event, {element, size}) {
this.setState({width: size.width, height: size.height});
},
render() {
return (
<div>
<button onClick={this.onClick} style={{'marginBottom': '10px'}}>Reset first element's width/height</button>
<Resizable className="box" height={this.state.height} width={this.state.width} onResize={this.onResize}>
<div className="box" style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
<span className="text">{"Raw use of <Resizable> element. 200x200, no constraints."}</span>
</div>
</Resizable>
<ResizableBox className="box" width={200} height={200}>
<span className="text">{"<ResizableBox>, same as above."}</span>
</ResizableBox>
<ResizableBox className="box" width={200} height={200} draggableOpts={{grid: [25, 25]}}>
<span className="text">Resizable box that snaps to even intervals of 25px.</span>
</ResizableBox>
<ResizableBox className="box" width={200} height={200} minConstraints={[150, 150]} maxConstraints={[500, 300]}>
<span className="text">Resizable box, starting at 200x200. Min size is 150x150, max is 500x300.</span>
</ResizableBox>
<ResizableBox className="box box3" width={200} height={200} minConstraints={[150, 150]} maxConstraints={[500, 300]}>
<span className="text">Resizable box with a handle that only appears on hover.</span>
</ResizableBox>
<ResizableBox className="box" width={200} height={200} lockAspectRatio={true}>
<span className="text">Resizable square with a locked aspect ratio.</span>
</ResizableBox>
<ResizableBox className="box" width={200} height={120} lockAspectRatio={true}>
<span className="text">Resizable rectangle with a locked aspect ratio.</span>
</ResizableBox>
</div>
);
}
});