search

palantir / blueprint

A React-based UI toolkit for the web
https://blueprintjs.com/
Apache License 2.0
20.61k stars 2.16k forks source link

Tree drag and drop #4256

Open adamerose opened 4 years ago

adamerose commented 4 years ago

Feature request

I'd love to see drag-and-drop functionality included on the BlueprintJS Tree component

Examples

Ant Design has a good example of this https://ant.design/components/tree/#components-tree-demo-draggable

I am going to need this for my project, and could modify the BlueprintJS Tree and submit a PR. Would it be okay to add a new dependency like react-beautiful-dnd? If anyone has an existing example for reference that would be helpful.

adidahiya commented 4 years ago

Duplicate of https://github.com/palantir/blueprint/issues/392, which was declined. react-beautiful-dnd looks like a nice library, but it is too large of a dependency to add to the @blueprintjs/core package. You should be able to build a custom draggable Tree component by combining these components, maybe you can share your implementation as an NPM package outside of this repo? If you run into any issues doing so with the public Tree API, let me know.

adamerose commented 4 years ago

@adidahiya Yeah I saw that issue but it seemed to be phrased as a question about current functionality rather than a feature request. I couldn't get either of the codesandbox demos working

too large of a dependency to add to the @blueprintjs/core package

Understandable. This is probably doable in vanilla React too, but I'll see how much harder it is

volkandkaya commented 3 years ago

@adamerose did you implement this? Would save me a lot of time.

Could it be a package like select?

adamerose commented 3 years ago

@adamerose did you implement this? Would save me a lot of time.

Could it be a package like select?

Hi, no sorry my project ended up using Ant Design instead so I used the built in Tree component. One thing I found though is it seems Antd's tree implementation built on top of a separate npm package rc-tree which looks easier to work with than the lower level react-beautiful-dnd, it has all the tree logic already made so I think you'd just need to drop in some Blueprint UI components as the tree nodes.