react-dnd-treeview
react-dnd-treeview copied to clipboard
minop1205
Allow drag of multiple items to target folder. Each item does not have to start in the same source folder.
The Multiple selections(checkbox) example does allow multiple select but does not allow multiple drag.
Great library @minop1205, just having the same issue regarding multiple selection and dragging. Any chance this may be fixed in a future version soon?
@mattevans-dev Multiple item dragging is discussed in the following Issue, but since react-dnd, the dependent library for this package, does not support multiple item dragging, it would be difficult to provide it as a feature of this library.
https://github.com/react-dnd/react-dnd/issues/14
However, as mentioned in the following comment, I think it is possible to achieve this functionality in a pseudo way by remembering the selection state in the application code on the side of the user of the package.
https://github.com/react-dnd/react-dnd/issues/14#issuecomment-245695046
We believe that using this method we can achieve multiple item drag and drop in the current version of react-dnd-treeview. We will add a sample for this soon, but it will be at a later time.
Thanks for the detailed reply @minop1205, that's really useful. I'll try implementing it based on the react-dnd comment. Keep up the great work!
Demos and sample code of multiple drags are available here.
As noted in the demo screen, this package itself does not have multiple drag functionality, so the logic for the operation must be written on the main application side.
In this case, it is convenient to have drag start and end events, so we have added the onDragStart and onDragEnd APIs in v3.1.
Demo(Storybook)
https://minop1205.github.io/react-dnd-treeview/?path=/story/examples-tree-multiple-drag--multiple-drag-story
Code(Codesandbox)
JavaScript: https://codesandbox.io/s/multiple-drag-js-m3ut0u?from-embed=&file=/src/App.jsx TypeScript: https://codesandbox.io/s/multiple-drag-ts-nf0m3k?from-embed=&file=/src/App.tsx