Sortable view

Question

Sortable view

pistacchio opened this issue 3 years ago · comments

Hi,
Thanks for the amazing library. Just a question. Imagine that I have a simple two-level structure (folders + files in it). How can I use read-dnd-treeview to sort the folders or the files within them?

Eg:

| Folder 1
    | File 1
    | File 2
    | File 3
| Folder 2
    | File 4
    | File 5

I want the interface to not allow dragging Folder 1 within Folder 2 or files in Folder 1 within Folder 2, but I do want to be able to drag File 1, File 2 and File 3 within Folder 1 in order to rearrange them or to drag Folder 2 above Folder 1 in order to have something like this:

| Folder 2
    | File 4
    | File 5
| Folder 1
    | File 2
    | File 1
    | File 3

Is this currently possible? How? Thanks

minop1205 · Answer 1 · Sat Apr 17 2021 23:23:38 GMT+0800 (China Standard Time)

Thanks for your message!

Controlling whether or not to accept drop is possible with the canDrop API, but sorting by drag is currently not yet possible.

In order to enable sorting by drag, we need to extend the onDrop API to pass new parameters (e.g., target index value), and we will look into implementing this.

pistacchio · Answer 2 · Sun Apr 18 2021 00:53:23 GMT+0800 (China Standard Time)

That'd be a killer and much appreciated feature, thanks. I'm looking forward to it.

minop1205 · Answer 3 · Thu Aug 19 2021 13:00:26 GMT+0800 (China Standard Time)

This issue is now supported in v1.5.0. Please refer to the README or the sample below for details.
https://codesandbox.io/s/placeholder-issue-30-680ss
https://codesandbox.io/s/placeholder-ts-w71l5

To implement manual sorting and placeholders, use the new APIs such as sort insertDroppableFirst canDrop dropTargetOffset and placeholderRender.

By combining these APIs, you can achieve the expected behavior.

If you have any problems, please reopen this issue.