web-dev-qa-db-ja.com

reactjsドラッグおよびサイズ変更可能なコンポーネント

過去数時間、反応コンポーネントをドラッグおよびサイズ変更可能にする方法を模索してきました。 react drag and drop でドラッグ可能にする方法を見つけましたが、サイズ変更可能にする簡単な方法を見つけることができません：/コンポーネントをドラッグ可能にする方法に関する経験がありますか？サイズ変更可能ですか？

ヘルプやポインタは大歓迎です！

javascriptreactjsreact-grid-layout
13
John Smith

https://github.com/STRML/react-resizable

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

この問題を解決するために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>
  )
}

コールバック関数は、小道具としてコンポーネントに渡すことができます。これらをフックすると、カスタム動作を定義できるようになります。

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

ドキュメントのコードサンプル： https://github.com/STRML/react-grid-layout

ここのデモ： https://strml.github.io/react-grid-layout/examples/0-showcase.html

8
sebastian the crab

react-rndそして本当に満足しています： https://github.com/bokuweb/react-rnd

3
oldo.nicho