CODEWITHSUNDEEP
reactjsjquery-ui
Will
Will

Reputation: 4715

How to import jquery ui into a React compoent

I have a react app running with webpack and I want to make an element draggable using jquery UI. I've added the library with

How can I import jquery ui into the component

Error: (...).draggable is not a function $(this.productElm).draggable({

//Install:
yarn add jquery-ui  

// Component file:

import $ from "jquery";
import draggable from 'jquery-ui';

export class Item extends React.Component {
  componentDidMount(){
     this.setPlacement();
     document.addEventListener('mousedown', this.handleOutsideClick, false)
      this.initInterations()
  }

initInterations(){
    setTimeout(() => {
      $(this.productElm).draggable({
        addClasses: false,
        stop: (e, ui) => {
          if(this.props.onChange){
            this.props.onChange({
              name: 'move',
              x: ui.position.left,
              y: ui.position.top
            }, this.props.item)
          }
        }
      })
    })
  }
}

Upvotes: 1

Views: 391

Answers (1)

Will
Will

Reputation: 4715

Seems like you can import the various jquery ui 'widgets' like this

import 'jquery-ui/ui/widgets/draggable';
import 'jquery-ui/ui/widgets/resizable';

To work out the path for the import, lookin the node modules folder for what you are importing.

Upvotes: 1

Related Questions