2

I have a react component in which I am trying to implement a jQuery ui resizable. I am pretty new to React.js and although the div does become draggable it does not become resizable.

Here is the code

export default class Element extends AppComponent {

  componentDidMount() {
    // store the node on the `this.node` so we can access elsewhere
    this.node = ReactDOM.findDOMNode(this);

    //make self draggable
    $(this.node).draggable();
    //make self resizable
    $(this.node).resizable({
      handles: "n, e, s, w, ne, nw, se, sw",
      containment: 'parent',
      minHeight: "1px",
      minWidth: "1px",
      start: function(){},
      resize: function(){}
    });

  }

  render(){

    return(
      <div class="element-wrapper" style={this.props.elementStyle}>
      </div>
    );
  }
}
Imraan Khan
  • 375
  • 1
  • 3
  • 9

1 Answers1

0

To use jQuery UI resizable you need to add the jQuery UI CSS file also. include these two to work

https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
Kuntal Sarkar
  • 21
  • 2