Proof of concept for doing a nested drag and drop in React

by React

nested-dnd

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.

Features

  • Allows you to drag a part of the stack with the items lying on top of the
    dragged one.
  • 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 element.animate(...) API.
  • The element currently being dragged always stays on top with use of :focus.
  • 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.

TODO

Putting it here so I won't forget.

  • [x] Get rid of example-specific magic numbers from <Drag />.
  • [ ] Fix bug with dropping outside of <Drop /> sometimes being possible.
  • [ ] Extract some top level API components from <App />.
  • [ ] 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.

Installation

tl;dr: not yet.

The only way to have fun with it is cloning the repository.

GitHub