Instantiate React-component in jquery's draggable helper-function

Question

I have a list of items realized as a React compontent. This list is a "Toolbox". If I start dragging an item from this list I want it to be represented as an instance of a React compontent.

My first approach was to just return a React.render(<MyReactDiv>, document.body) in my customized jQuery helper-function but I can't get it running.

Any suggestions?

So far my code is (ES6)

ListPage.js

import React from 'react'
import MyReactDiv from './myReactDiv'
import $ from 'jquery'
import draggable from 'jquery-ui/draggable'

export default React.createClass({

  render () {
    return (
      <div>
        <ul>
          <li className='draggableLI'>one</li>
          <li className='draggableLI'>two</li>
          <li className='draggableLI'>three</li>
        </ul>
      </div>)
  },

  componentDidMount () {
    $('.draggableLI').draggable({
      // helper: 'clone', // <-- I dont want to clone the li
      helper: () => { // ... but want to return an instance of MyReactDiv during dragging
        // not working:
        // let content = React.render(<MyReactDiv>, document.body)
        // return content

        // working but duplicated code:
        return $('<div>A Div</div>')
      }
    })
  }
}

MyReactDiv.js

import React from 'react'

export default React.createClass({

  render () {
    return (<div>A Div</div>)
  }
}

Why are you want to use React and jQueryUI-draggable together. There some native solution for React. Look at this answer: http://stackoverflow.com/questions/20926551/recommended-way-of-making-react-component-div-draggable — just-boris, Jul 05 '15 at 19:19
in principle you are right. I use react-draggable for my Basic drag-operations. But in this Special case I have to make a div draggable that has a jsPlumb Endpoint attached. They dont get attached to the div directly and so will not be dragged along a react-draggabale component. By using jQuer.draggable() this works. — Benvorth, Jul 05 '15 at 20:32
hello @Benvorth did you find any solution on this , facing the same issue and raised a question also https://stackoverflow.com/q/50657089/4061006 . Any help on this really helpful. — Jayavel, Jun 02 '18 at 12:58

score 3 · Answer 1 · answered Aug 23 '15 at 16:45

It's been a while, so hopefully you'll find this useful.

In order to use a react component as a helper, I had to do something like this:

jQuery('.draggable').draggable({
   helper: function() {
      var helper = jQuery('<div id="helper" class="helper"></div>');
      helper.appendTo(jQuery('body'));
      React.render(<Component/>, document.getElementById('helper'));
      return helper;
   },

Instantiate React-component in jquery's draggable helper-function

1 Answers1