Resizable and Draggable

[andrewgleave]

Is it possible to have an element be resizable and generally resizable as well? i.e the width and height can be changed as in the demo, but the element also dragged around?

<ResizableBox
  className={ this.props.className }
  draggableOpts={{
    start: { x: this.props.frame.x, y: this.props.frame.y },

    grid: [25, 25],
    onStop: this.handleDragStop
  }}
  width={ this.props.frame.w }
  height={ this.props.frame.h === 'auto' ? 100 : this.props.frame.h }
  minConstraints={[100, 100]}>
    <span>Some markup</span>
</ResizableBox>

[STRML]

Yes, this is possible.

The boxes in the react-grid-layout showcase are resizable and draggable. This is done by simply nesting the two. See the source for how this is done.

[andrewgleave]

Ok thanks for the pointer.