Skyhook is a toolkit for building complex drag and drop interfaces in
Angular. It is based on, and very similar to
react-dnd by Dan
Abramov and others, and is also powered by
is compatible with all backends.
yarn add @angular-skyhook/core react-dnd-html5-backend
High performance. All code runs outside the Angular zone, and
re-enters in batches only where strictly necessary, such that change detection
runs precisely as many times as you need it to, with no extra configuration.
You should also be able to take full advantage of
OnPush change detection.
Largely possible to translate
react-dnd code and examples into Angular
(see Translating React Code).
Comprehensive documentation and tons of example code, written in Angular style.
Instead of building maximally-ergonomic solutions to simple use cases,
@angular-skyhook provide an abstraction over most things you
could want to do with drag and drop. They are lower-level building blocks that
make it easy to implement some very complex interactions. They assign no
specific meaning to a drag/drop operation. You get to define what happens when
a drag starts or ends or hovers. Here are some ambitious examples:
react-dndtutorial, a chess board with movable pieces and rules
react-dnd(most with GIFs) in use
It is important to note that for bare-bones sortable lists, where you have
a mutable array of simple values, you don't necessarily need the superpowers in
this library. There are plenty of cookie-cutter solutions out there, like the
ng2-dragula, which may
get you to your deadline faster than learning and using
be warned; you may find yourself wanting more dragging power once you get
a taste. In fact, this package was born when
@cormacrelf got sick of maintaining
ng2-dragula and watching users struggle to implement what
react-dnd was born
If Angular and React aren't your thing, there's also
Not all issues are
@angular-skyhook-related. If you think you found a bug in
dnd-core or with the HTML5 backend, those issues belong on that
codebase with their many contributors
and wealth of experience. If there is a problem with another backend you are
using, file an issue with that backend so you can get more specific help and so
that the community can benefit.
Issues and potential improvements to
@angular-skyhook are discussed on
This library is released under the MIT license. It depends on
which is (now) also under the MIT license.