Proof of concept for doing a nested drag and drop in React. Features smooth, animated drop and cancel.
:construction: WORK IN PROGRESS :construction:
At the moment this serves more as a proof of concept (or example) rather than
a library-like thing.
- Allows you to drag a part of the stack with the items lying on top of the
- Drop it on top of any other stack so the elements will smoothly migrate there.
- Drop it anywhere so the elements smoothly go back to their place.
How it works?
- The overlaying of the cards relies on CSS transforms.
- Animations are triggered
in JS via
- The element currently being dragged always stays on top with use of
- Stack is a recursive component.
- Drop zones are registered and passed using context API.
- Changing parent stack uses waaaay too much logic bound to this example.
Putting it here so I won't forget.
- [x] Get rid of example-specific magic numbers from
- [ ] Fix bug with dropping outside of
<Drop />sometimes being possible.
- [ ] Extract some top level API components from
- [ ] Maybe use indexes instead of made up IDs that are mostly indexes anyway.
- [ ] Rethink naming of things in a way that keeps the cards analogy but isn't
specific to it when not necessary.
tl;dr: not yet.
The only way to have fun with it is cloning the repository.
Subscribe to React.js Examples
Get the latest posts delivered right to your inbox