How do I use "draggable()" function in React?

Question

In my React code, I'm trying to convert createClass into ES6 Classes, and I'm struggling here:

componentDidMount()
{
$(ReactDOM.findDOMNode(this)).draggable();
}

(which used to be: $(this.getDOMNode()).draggable(); before conversion, and worked perfectly)

The error I'm getting is:

__WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.findDOMNode(...).draggable is not a function

I'm aware that draggable() is a function in jQuery UI, so I tried importing that in the script tag of my HTML file.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

I've included the following in my React file:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { findDOMNode } from 'react-dom';
import $ from 'jquery'; 
import css from './style.css';

Nothing seems to work whatsoever.

As you said `draggable` is jquery plugin. So you need jquery instance to use it. Why did you remove `$(...node)`? — Yury Tarabanko, Apr 29 '18 at 11:17
@YuryTarabanko Oh sorry the $ sign got left behind while copying. I have updated the code here, and the problem still persists. — Areeb Khan, Apr 29 '18 at 11:33
Yes, I'm creating an app using the 'create-react-app' command in terminal. — Areeb Khan, Apr 29 '18 at 11:36
The error message should be different then :). Also make sure you are correctly importing jquery-ui module as well. `jquery.fn.draggable` should be a function. — Yury Tarabanko, Apr 29 '18 at 12:00
Oh yes, it's showing: `TypeError: __WEBPACK_IMPORTED_MODULE_2_jquery___default(...)(...).draggable is not a function` now. Help me out please? — Areeb Khan, Apr 29 '18 at 12:08
Check you have imported jquery-ui. There should be `import 'jquery-ui'` line of code. This question might be helpfull https://stackoverflow.com/questions/35259835/how-to-import-jquery-ui-using-es6-es7-syntax — Yury Tarabanko, Apr 29 '18 at 12:11
I just wanted to say, this is my first time using this website after having signed up for more than 2 years. If everybody here is as helpful as you, I'm never getting off it. Thank you so much :) Also, how do I upvote your answer so that other noobs like me could see? — Areeb Khan, Apr 29 '18 at 12:34
I've posted an answer. You could accept it if it was helpfull :) — Yury Tarabanko, Apr 29 '18 at 13:37

score 2 · Accepted Answer · answered Apr 29 '18 at 13:37

As discussed in comments.

You still need to wrap DOM node with jQuery instance to use jquery plugins on it.

componentDidMount() {
  // $() is important
  $(ReactDOM.findDOMNode(this)).draggable();
}

You need to import jquery-ui module to enhance jQuery prototype with draggable, sortable and other jQueryUI plugins.

import 'jquery-ui';

How do I use "draggable()" function in React?

1 Answers1