reactjs draggable и resizeable component

Question

Последние несколько часов я пытался найти способ сделать компонент реакции перетаскиваемым и изменяемым по размеру. Я нашел способ сделать его перетаскиваемым с помощью react drag and drop, но я не могу найти простой способ сделать его изменяемым по размеру:/ Есть ли у кого-нибудь опыт в том, как сделать компонент перетаскиваемым и изменяемым по размеру?

Любая помощь или указатели оцениваются!

Answer 1

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

Answer 2

Использование среагировать-сетки-макет, чтобы решить эту проблему. В частности, для виджета планирования, где пользователи могут масштабировать блоки времени и перетаскивать их по горизонтальной временной шкале.

Взаимосвязь с сеткой-сеткой обеспечивает сетку с перетаскиваемыми и изменяемыми по размеру виджетами плюс отзывчивый макет, факультативная автоматическая упаковка, среди других функций.

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

Demo здесь: https://strml.github.io/react-grid-layout/examples/0-showcase.html

Answer 3

Я использую react-rnd и очень доволен это: https://github.com/bokuweb/react-rnd