shaddix / dnd-kit-sortable-tree Goto Github PK

When dragging any item and releasing mouse, it goes back to initial state but after that appears at proper position.
ScreenBug.webm

Reproducible via playcode

I've been testing the package and discovered that the size of tree state will grow incredibly quick. I've used object-sizeof to get the size of the tree and as you can see in the video, it gets crazy quickly.

Here's a playcode to show the issue (see the console):

https://playcode.io/1532895

To make this work with multiple containers, would likely require that user could write handle code for DNDcontext's onDragOver -event. For now, I guess the only even that user may write handler to is onDragEnd (=onItemsChanged). Thus making this work with multiple containers is harder.
So, as a feature request: some kind of support for multiple containers

thank you for the sortable tree! 👍🏻

What is a safe way to add one more child to an item?

trying to change items i get a warning "The final argument passed to useLayoutEffect changed size between renders." and nothing renders.

flatten function saves parent, which can create infinite depth nesting (parent -> children)

Tried applying the disableSorting property as a prop in the SimpleTreeWrapper, but sorting is still enabled for the item.

It appears that when console logging the props object, it's undefined and getting reset to undefined on each render. Any ideas why?

Will attach a video soon.

I wanted to document this here since it was helpful and I didn't see any mention here.

These are the default mouse event options:

pointerSensorOptions={{
  activationConstraint: {
    distance: 10
  }
}}

I found this to be far more responsive feeling - presumably 10 is the default to avoid clicks that are accidentally drags to be mistaken for drags, but 10 is quite a distance in terms of how responsive it feels. Adjusting the value may be helpful:

pointerSensorOptions={{
  activationConstraint: {
    distance: 3
  }
}}

So, when dragging starts, active element and its children gets deleted from DOM and we are left with ghost. However I would love to still keep active element in its place while trying to find a new place with its ghost.

I copied src folder to my project so I can make changes freely, played with CSS, then realized that it is actually happen via the code.
I couldn't get what I want without breaking functionality. Could you please help?

This is what I want to achieve - preserving space of element while dragging (on the video, element has space but not its content. I would like to preserve it together with content too)

I just upgraded to 0.1.70 and noticed that I can no longer simply move elements from left to right within the hierarchy, i.e. only change their depth, not their position within the top-down list.
Downgrading to 0.1.68 fixes this issue. The problem was probably introduced by the early return in e00f020 .

You can see this in your vscode like example

https://shaddix.github.io/dnd-kit-sortable-tree/?path=/story/simple--vs-code-like

When an item A is dragged on such a height, that it should be dropped into item B, but B cannot have children, a projection is shown in B, if A is dragged out of bounds (see 1) and to the left it is below B, if it is to the right it is shown with depth of 0 (see 2)
In both cases "Collections 131" can't have children.

It would be helpful if we have data what item was dragged with its source and destination.
{id: string, parent_id_source: string, parent_id_destination: string}

We can use this if we want to know what item was changed.

Maybe we can pass this in onItemsChanged

With the basic example, I get lot of warnings to console, for example:
"Warning: React does not recognize the childCount prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase childcount instead. If you accidentally passed it from a parent component, remove it from the DOM element."

Similar warnings for other props like isLast, disableSorting etc. In a bit further implementation, still mainly very similar to basic example, same goes also with indentationWidth, wrapperRef, disableSelection, disableInteraction, handleProps

also getting:
"Warning: Received false for a non-boolean attribute collapsed."
"Warning: Received false for a non-boolean attribute ghost."
"Warning: Unknown event handler property onCollapse. It will be ignored."
"Warning: Unknown event handler property onRemove. It will be ignored."

They are warnings not errors, but anyway.

I am not able to use the example in next.js with SSR.

error - ReferenceError: navigator is not defined

Steps to reproduce

1. npx create-next-app@latest
2. Install dnd-kit-sortable-tree
3. Copy example from README.md

Is there support for SSR?

There is a relatively minor, but still noticeable jump upon drop that would be great to be resolved.

I believe the transform that's being applied while dragging gets removed on drop, so there's a 1 frame/processor-tick delay until setState(changedItems) resolves on the next render.

Video here:

Original related issue: #19

Let me know if I can provide any more info to help debug!

Is there any way we can force a default collapse on items when the page is loaded?

I.e., instead of having

Folder 1
> item 1
> item 2
Folder 2
> item 3
> item 4

we just have

Folder 1
Folder 2

I have been trying to do this by setting collapsed={true} or even calling onCollapsed inside the item but both don't work

I would like to key off the drag events to perform other actions. Such as the onDragStart drag event.

I think the best way to do this would be to add a renderProp that is used inside of the DNDContext and it can be generic.

While changing the input field state from onchange it's focusing out,
I can't type continuously

<SimpleTreeItemWrapper {...props} ref={ref}>

{res}

I would like to be able to restrict the movement of items within the tree conditionally. If a condition is met, I want elements to not be able to change their parent and only be sorted (i.e. their indices changed) within their current parent. While part of this can be accomplished using canHaveChildren, one can still always move items to the root (simply adding a top-level item does not fix the problem). While I can disable the actual movement in onItemsChanged, the preview is still shown at the top level. Ideally, I would like to have a callback to determine if a specific drag is valid and only then show the preview in that new position, otherwise the preview would remain in its previous position. If that is too difficult, is it possible to add a callback to SortableTree, which has the same effect as canHaveChildren but for the root?

Hi,

thanks for this library, it's really nice.

However, i've found an issue when sorting items on any touch device (even in Chrome DevTools in touch mode). The item drag overlay shows up, but it's not stuck to the finger. You need to touch and drag the overlay for the second time for it to work.

I would expect that the overlay should stick to the finger on the first drag motion.

It's reproducible in your storybook example ().

And here is an image of the stuck overlay i'm talking about:

Thanks for any advance on this.

I'm hoping to disable the animation that happens upon dropping an item, as it tends to be a bit buggy and feels unnecessary since the user has already dropped the item and probably expects to now see it stay where they dropped it (rather than jumping back to it's previous position and then to it's new position again).

I tried passing the following prop, but it had no effect:

      dropAnimation={{duration: 0, easing: "ease"}}

line 279 in the implementation here: https://github.com/Shaddix/dnd-kit-sortable-tree/blob/master/src/SortableTree.tsx

          <DragOverlay
            dropAnimation={dropAnimation ?? dropAnimationDefaultConfig}
          >

It looks like it should work, but for some reason it doesn't seem to have any effect.

Hey! Great library, thanks for making this!

I'm using it with NextJS but it does not support SSR. I made this change locally: #9 and then it works if I wrap it with dynamic:

const SortableTreeClient: any = dynamic(() => Promise.resolve(SortableTree), {
  ssr: false,
});

But it still gives me some issues with document if I don't wrap it in dynamic. I think it's related to this line:

Cheers

Hi, thank you for saving me many hours with this mini library of sorts.

So onto my question. Can I use two different SortableTrees and drag like in the example?

I think I should be able to since no major code is changed but I'm not quite sure since I'm a novice coder at best.
Cheers!

I recently discovered your library, and it seems perfect for a problem my team is facing. However, we are unsure how this project is licensed. Your npm package dnd-kit-sortable-tree has an MIT license and your project contains a badge referencing the MIT license as well. However, the repository does not contain a LICENSE.txt for the MIT license, which is the standard way to license a project. Is it your intention to license this project under the MIT license? If so, could you please include said LICENSE.txt ?
See below for how to easily add the LICENSE.txt:
https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository
https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/licensing-a-repository

Thanks for the cool library!

How can we prevent folder moving inside to another folder? but all other items are free to move around?
I tried depth property, but not showing any effect.

Hi bro,
 
I have the following request. There are two areas: Screen list and Menu list (using dnd-kit-sortable-tree).
The menu list only contains 3 levels, the 3rd level includes items from the Screen list.

• I want to DnD item from Screen list to Menu list (just go to 3rd menu). After DnD, the screen item will not disappear from the Screen list.
• I want the items on the Menu list to be sorted on the same level, in the same parent folder, the level of the item cannot be changed.
  Ex: If there is a parent tree, it can only be sorted in the parent tree. If it does not have a parent tree (level 1), the position can only be sorted in the root tree.
   
  Please give me a solution.
  My repo: https://codesandbox.io/p/sandbox/tree-r6qy39?file=%2Fsrc%2FApp.tsx
   
  Thanks

Hey @Shaddix

I am working on a personal project that is really dependent on the dnd kit sortable tree example. For some reason there is a bug that is just causing the items to go all over the place.

I was wondering if your project has that and if you would be willing to spend some time helping me make the sortable tree usable for my project for a paid fee.

As title says, it would be handy if there was a way to disable sorting on a child node. I know you can pass in true to disableSorting in the Sortable Tree root, but I wasn't able to disable sorting on children.

SimpleTreeItemWrapper seems to have a disableSorting property; explicitly setting it to true (instead of implicitly via the root) doesn't do anything, so I'm assuming it's meant to be read only.

This library is an awesome template for building sortable trees. I was wondering if there's any prop that allows you to set the items to only be draggable by the handle?

Is there a way to move the toggle to a specific child element of the SimpleTreeItemWrapper (similar to manualDrag)? I have an instance where I need to both be able to toggle and select each item.

Edited to add: if I add e.stopPropagation to the button I can override it, but wondering if there's something built-in. Thank you!