react-sortable-tree not working with react-froala-wysiwyg

[andershansander]

Hi!

When using react-sortable-tree with another drag-n-drop component like react-froala-wysiwyg the tree work as expected but the drag-n-drop in react-froala-wysiwyg is blocked.

Here are the steps to create a project with the issue:

npm install -g react-create-app
react-create-app sortable_tree_and_froala
cd sortable_tree_and_froala
npm install --save react-sortable-tree react-froala-wysiwyg

Replace the index.js content with this:

import React from 'react';
import { render } from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

import Tree from 'react-sortable-tree'
import FroalaEditor from 'react-froala-wysiwyg';
import 'font-awesome/css/font-awesome.css';
import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import $ from 'jquery';
window.$ = $;

const App = () => (
  <div>
    <Tree />
    <FroalaEditor treeData={{}}/>
  </div>
);

render(<App />, document.getElementById('root'));

Now if you run "npm start" and insert an image in the Froala editor it cannot be dragged and dropped to another location in the editor window.

I understand if interoperability issues are not really something you look into so feel free to close this issue if that is the case.

[fritz-c]

https://github.com/fritz-c/react-sortable-tree#if-it-doesnt-work-with-other-components-that-use-react-dnd
Try the method explained there. react-dnd only allows for one dnd context at a time, so you'll also need to see if the froala editor allows you to get their component without the dnd context wrapping it.

[andershansander]

Thank you for the quick response. I tried the method mentioned but the problem remains. I believe that Froala is using the jQuery draggable plugin for drag and drop. Do you know if there is any compatibility issues with that library?

[fritz-c]

Ah, I wouldn’t know, in that case.

[jonccooke]

Thank you for the quick response. I tried the method mentioned but the problem remains. I believe that Froala is using the jQuery draggable plugin for drag and drop. Do you know if there is any compatibility issues with that library?

@andershansander did you get an answer to your issue?

[andershansander]

Thank you for the quick response. I tried the method mentioned but the problem remains. I believe that Froala is using the jQuery draggable plugin for drag and drop. Do you know if there is any compatibility issues with that library?

@andershansander did you get an answer to your issue?

@jonccooke I don't think I did, sorry. I have moved to another company since so cannot check if it got solved, I am afraid.

[jonccooke]

Thank you for the quick response. I tried the method mentioned but the problem remains. I believe that Froala is using the jQuery draggable plugin for drag and drop. Do you know if there is any compatibility issues with that library?

@andershansander did you get an answer to your issue?

@jonccooke I don't think I did, sorry. I have moved to another company since so cannot check if it got solved, I am afraid.

Ah, ok. Thanks for letting me know.

[lifejuggler]

are people still having trouble with this?

[jonccooke]

are people still having trouble with this?

Hi I have posted another issue https://github.com/frontend-collective/react-sortable-tree/issues/757, whereby I need the tree to recieve a drop event from another framework that uses JQuerys' draggable plugin and was trying to work out how to do this.

This thread had a similar topic.

I you could point the way that would be fantastic.