reactjs beweglicher und skalierbarer Komponenten

den letzten paar Stunden, die ich habe versucht, die Suche nach einem Weg, um ein reagieren Komponente verschiebbare und veränderbare. Ich habe einen Weg gefunden, es zu machen, ziehbar mit reagieren drag-and-drop, aber ich kann nicht finden eine einfache Möglichkeit, um es in der Größe geändert werden :/
Hat jemand eine Erfahrung, wie man ein Bauteil gezogen werden kann und veränderbare?

Jede Hilfe oder Hinweise sind wir sehr dankbar.

InformationsquelleAutor John Smith | 2015-07-26

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

Dies illustriert, wie die Elemente der Größe veränderbar, aber die Frage fragt, wie man ein element sowohl in der grösse veränderbar und ziehbar.

InformationsquelleAutor Vishnu

8

Verwendung reagieren-grid-layout um dieses problem zu lösen. Speziell für ein scheduling-widget, wo Benutzer kann die Skala der Zeit-Blöcke und ziehen Sie Sie entlang einer horizontalen Zeitachse.

reagieren-grid-layout sorgt für ein raster mit verschiebbare und in der Größe anpassbare widgets plus responsive layout, optional auto-Verpackung, unter anderem features.
```
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>
  )
}
```
Kind-Knoten sind verschiebbare und veränderbare. Das layout definiert, in der jedes Kind "_grid" prop kann alternativ definiert werden direkt an die Eltern "layout" prop:
```
//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>
  )
}
```
Callback-Funktionen übergeben werden können, um die Komponenten als Requisiten. Einhängen in dieser sollte es Ihnen ermöglichen, zu definieren benutzerdefinierte Verhalten:
```
//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
```
Code-Beispiel aus den docs:
https://github.com/STRML/react-grid-layout

Demo hier:
https://strml.github.io/react-grid-layout/examples/0-showcase.html
- Beachten Sie, dass link-nur Antworten sind entmutigt, SO Antworten sollte, den end-Punkt einer Suche nach einer Lösung (vs. noch ein weiterer Zwischenstopp von Referenzen, die dazu neigen, veralten im Laufe der Zeit). Bitte erwägen Sie, einen stand-alone-synopsis hier, halten den link als Referenz
- Diese macht genau das, was ich brauche. Auch, sehr sauber und können Hinzugefügt werden, in anderen UI-framework
InformationsquelleAutor sebastian the crab
2

Habe ich mit react-rnd und bin wirklich glücklich mit ihm: https://github.com/bokuweb/react-rnd

InformationsquelleAutor oldo.nicho

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.