Comments (3)
1. Prevent children from being parents
@mikevandre react-dnd uses types wich let you specify which drag sources and drop targets are compatible. Check DropTarget. Looked quickly through the code and seems like every dragsource is passed with default ItemTypes.HANDLE: https://github.com/fritz-c/react-sortable-tree/blob/3e8e10e276beeaf47aa99965e9a41a1cb05712a7/src/utils/drag-and-drop-utils.js#L214
Other than that @fritz-c has done an excellent job! I've been working on similar project and tree-data-utils.js
gave me some good ideas how to better flatten the tree.
from react-sortable-tree.
1. Prevent children from being parents
Of your three questions, this is probably the most difficult to implement. I recently looked into adding a canDrop
method that the user can customize to prevent dropping under certain circumstances. However, the amount of calculation that goes into seeing where the node will land in the tree, repeated every time there's a new drag
event over the drop area, makes it really difficult to provide a flexible and performant canDrop
API. I plan on revisiting that problem eventually, and am welcome to any suggestions for how to make it work quickly.
2. Metadata beyond title, subtitle
Just add anything you want in the data for the nodes, and it will be available in every callback.
3. Different types of nodes that render differently
If it's just style differences, you can use the generateNodeProps
prop to add certain className
props based on the node info.
If you want to more than that, you can set the nodeContentRenderer
prop to a component you create yourself. With this, almost any aspect of the appearance of the nodes can be changed. If you decide to take this path, I highly recommend copying the node-renderer-default.js
and node-renderer-default.scss
files to your own code base and modifying them as you need.
Even if this library doesn't seem like a good choice for your project, you might consider using the functions in tree-data-utils.js
to manipulate tree data.
from react-sortable-tree.
I just released the canDrop
API with version 0.1.13. I think this should help you do what you're trying to do.
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.