Comments (8)
Hi, thanks for trying out the component. Try using the react-dnd context you're already using along with the context-less exported component SortableTreeWithoutDndContext
Something like:
import { SortableTreeWithoutDndContext } from 'react-sortable-tree';
import { dragDropContext } from 'react-dnd';
// ...
const myReactDndContext = dragDropContext(HTML5Backend);
const SortableTree = myReactDndContext(SortableTreeWithoutDndContext);
const MyOtherDndComponent = myReactDndContext(OtherComponent);
// ... use them in render()
from react-sortable-tree.
Going to treat this as closed due to inactivity.
from react-sortable-tree.
Thanks @fritz-c ! It worked for me using import { DragDropContext } from 'react-dnd';
from react-sortable-tree.
Hello!
I have the same problem.
I use your tree in one column and I have to use React DnD in other column.
App.js
import { DragDropContextProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import ShowDirectoriesList from '../../containers/ShowDirectoriesList';
class App extends React.Component {
render() {
return (
<DragDropContextProvider backend={HTML5Backend}>
<Grid>
<Row className="show-grid">
<Col md={1} />
<Col md={5}>
<Panel className="explorer">
<ShowDirectoriesList />
</Panel>
</Col>
<Col md={6} />
</Row>
</Grid>
</DragDropContextProvider>
);
}
}
DirectoriesList.js
import SortableTreeWithoutDndContext from 'react-sortable-tree';
class DirectoriesList extends React.Component {
render() {
return (
<SortableTreeWithoutDndContext
// ...
/>
);
}
}
With this code, when I tried to drag any element in the tree I got "Cannot have two HTML5 backends at the same time."
from react-sortable-tree.
@aterentev Need to put brackets around the name in the import as follows:
import { SortableTreeWithoutDndContext } from 'react-sortable-tree';
from react-sortable-tree.
Thanks @fritz-c ! It helps.
from react-sortable-tree.
My component that uses the tree is loaded into another project by clicking on one of the tabs. The first time you load a tree, an error occurs - "Cannot have two HTML5 backends at the same time".
The decisions above did not help.
Only the change in value helps window.__isReactDndBackendSetUp = undefined or window.__isReactDndBackendSetUp = false.
The tree is loaded but the tree does not work at all drag and drop. Image
Can anyone know which fields of the 'window' object changes when working with a tree?
from react-sortable-tree.
@IvanGrodno this issue is already documented as a bug / more investigation. For future reference, its probably best to open a new issue or look if this issue already exists.
Maintainers rarely check closed issues.
from react-sortable-tree.
Related Issues (20)
- How to use props with redux ? HOT 1
- React version dependency issue HOT 5
- how to make search nodes only starting from one node which we clicked ?
- Is it possible to make the react sortable tree ui less big with a setting : sm, md, bg ?
- React dnd upgrade HOT 2
- How to customize move handler? 🤔 HOT 2
- div is fadeout when drag
- Insert node at specific index under parent node.Iindex HOT 1
- It is possible to use a node as ReactRef() ? HOT 1
- Give Children another label/property name
- Failed to minify the code error HOT 2
- getTreeFromFlatData set rootKey as null
- Support multiple dragging
- Option to snap automatically to nearest possible level HOT 1
- Support React 18 HOT 1
- new child is added to the parent when collapsing the parent
- Using the react-sortable-tree in react 18 HOT 2
- is it possible to display the tree as a vertical tree diagram?
- About maintenance of this library
- Could not resolve dependency: React 18 with [email protected] HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-sortable-tree.