Consider add example about drag div item outside container to container draggable

[cuongdevjs]

[cuongdevjs]

For example, I have a list dropdown item can be dragged, I wanna drag item and drop it to the container draggable.

[clauderic]

Could you elaborate a bit more or provide a visual example just to make sure I can better visualize what you're trying to build?

[cuongdevjs]

Sorry if my description hard to understand 😄 Basically, it's kind of https://frontend-collective.github.io/react-sortable-tree/?path=/story/advanced--drag-from-external-source

[clauderic]

Do you need a nested tree or are you only looking to be able to drag something from outside into a list? And also, does the list need to be sortable?

[cuongdevjs]

Yes, it's nice. I think that feature (or example about features as you mention above) should be added. It's helpful for many people looking for a solution to do that. Thanks 😊

[mrcoles]

I’d love an example with a nested tree, e.g., I can add items and categories to a list, which can all be sorted, but items can also be moved between categories or the main list.

A simple demo where the items & categories are already in there but can be dragged/sorted around would be super helpful:

* item 1
* item 2
* category A
    * item 3
    * item 4
* item 5

[alex-mironov]

@clauderic sorry for pinging, but is it possible to build the nested sortable tree (of folders) with this library? I saw a couple of issues reported asking about the same but there was no explicit confirmation that it's possible. I'm trying to do something similar to what's achieved here https://tree-react-component.vercel.app/demo/draggable (<- cannot use this as it's hardly customasible). Would appreciate any answer

[clauderic]

is it possible to build the nested sortable tree (of folders) with this library

It's possible, yes.

I don't have time to build an example of this at the moment, but essentially it requires making all files draggable and all folders droppable. If you want to be able to drop on top of files, you can also make the files draggable and droppable.

[ab-dt]

@clauderic thank you for this wonderful library!

I've a similar usecase, but something like a folder system where there are multiple folders and files where files can be dragged inside folders but not vice-versa. Also folders and files are sortable amongst themselves.

Could you share a simple code snippet or the structure in which this can be achieved?

[danmolitor]

looking to be able to drag something from outside into a list

I have this use case, finding it kind of hard to figure out how this should be done.

I have one sortable list, and can swap nodes within it using this case in onDragOver.

            if (over && activeId !== overId) {
              setItems((prev) => {
                const oldIndex = prev.findIndex((val: { dndId: string }) => {
                  return activeId === val.dndId;
                });
                const newIndex = prev.findIndex((val: { dndId: string }) => {
                  return overId === val.dndId;
                });
                return arrayMove(prev, oldIndex, newIndex);
              });
            }

But I'm not sure of the correct way to set things up to drag items into this list from a pre-defined set of items (non-sortable).