Skip to content

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

Notifications You must be signed in to change notification settings

tchayen/nested-dnd

Repository files navigation

nested-dnd

Proof of concept for doing a nested drag and drop in React. Features smooth, animated drop and cancel.


🚧 WORK IN PROGRESS 🚧

At the moment this serves more as a proof of concept (or example) rather than a library-like thing.


Check out a video on my Twitter.

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.

  • 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.

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published