Javascript reactjs可拖动和可调整大小的组件

在过去的几个小时里，我一直在尝试寻找一种方法，使react组件可以拖动和调整大小。我已经找到了一种使其可拖动的方法，但我找不到一种使其可调整大小的简单方法：/ 有没有人有过如何使组件可拖动和调整大小的经验

感谢您的帮助和指点

此答案仅适用于可调整大小的组件。您可以找到其他具有这两种功能的答案

'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>
    );
  }
});

“严格使用”；
var React=require（'React/addons'）；
窗口的类型！==“未定义”&&（window.React=React）；//用于开发工具
窗口的类型！==“未定义”&&（window.Perf=React.addons.Perf）；//用于开发工具
var=要求（'lodash'）；
var resizeblebox=require（'../lib/resizeblebox.jsx'）；
var resizeble=require（'../lib/resizeble.jsx'）；
require（'style！css../css/styles.css'）；
var TestLayout=module.exports=React.createClass({
displayName:“TestLayout”，
getInitialState（）{
返回{宽度：200，高度：200}；
},
onClick（）{
this.setState（{宽度：200，高度：200}）
},
onResize（事件，{element，size}）{
this.setState（{width:size.width，height:size.height}）；
},
render（）{
返回(
重置第一个元素的宽度/高度
{“元素的原始使用。200x200，无约束。”}
{”，同上
可调整大小的框，捕捉到25px的偶数间隔。
可调整大小的盒子，从200x200开始。最小尺寸为150x150，最大尺寸为500x300。
具有仅在悬停时显示的句柄的可调整大小的框。
具有锁定纵横比的可调整大小的正方形。
具有锁定纵横比的可调整大小的矩形。
);
}
});

使用react网格布局解决此问题。特别是对于调度小部件，用户可以缩放时间块并沿水平时间线拖放它们

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>
  )
}

来自文档的代码示例：

此处演示：

---

我一直在使用

react rnd

，我对此非常满意：

注意，这是不鼓励的，因此答案应该是搜索解决方案的终点（与另一个参考文献的中途停留相比，随着时间的推移，这些参考文献往往会过时）。请考虑在这里添加一个独立的概要，保持链接作为参考，这正是我所需要的。另外，非常干净，可以添加到任何其他UI框架中。这说明了如何使元素可调整大小，但问题是如何使元素既可调整大小又可拖动。我刚刚经历了这一冒险，感觉最好的是将react可调整大小与react可拖动相结合。可调整大小的组件可以包装在一个可拖动的组件中，以实现这两个目的。DragTable由react Resizeable内部使用react DragTable和react Resizeable自2020年9月起不一起工作根据本期和我的个人经验：

// 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>
  )
}

// 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