reactjs draggable and resizeable component

Question

for the past few hours I have been trying to search for a way to make a react component draggable and resizable. I have found a way to make it draggable with react drag and drop, but I can't find a simple way to make it resizeable :/ Does anyone have any experience on how to make a component draggable and resizable?

Any help or pointers are appreciated!

Answer 1

Using react-grid-layout to solve this problem. Specifically for a scheduling widget where users can scale time blocks and drag and drop them along a horizontal timeline.

react-grid-layout provides a grid with draggable and resizable widgets plus responsive layout, optional auto-packing, among other 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>
  )
}

The child nodes are draggable and resizable. The layout defined in each child "_grid" prop can alternatively be defined directly on the parent "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 functions can be passed to the components as props. Hooking into these should allow you to define any custom behavior:

// 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 sample from docs: https://github.com/STRML/react-grid-layout

Demo here: https://strml.github.io/react-grid-layout/examples/0-showcase.html