ss's Issues
Drag and Drop Library
Feature
We'd like to:
- Drag (collapsed) drawers vertically to reorder them
- Drag same-sized cards vertically and horizontally in a grid to re-order them
Libraries
react-dnd
This is what is currently being used for dragging drawers. This library is primitive and based on an HTML5 dnd backend.
Pros:
- Very customizable
- Already used in project
- Most popular dnd library based on NPM stats
- Has been actively worked on for years
Cons:
- Animations and movement logic not included, would have to spin up our own
- Cursor image when dragging can't be changed
react-beautiful-dnd
Another very popular dnd library.
Pros:
- Probably the most fleshed out vertical / horizontal list dnd library out there
- Animations and logic are included
- Plug and play
- Very popular
- Lots of features
Cons:
- Not as customizable, will be less so than
react-dnd
- Grid dnd is not supported
- There's been less activity in the last year, though before that it was very active
Questions:
- Would the logic for getting grid dnd working be the same or more difficult with this library compared to
react-dnd
? If it's the same complexity, this would be the better choice. However, due to less customization, a solution may be more hacky. - There's a fork with such a solution here, but as it's a fork, is it updated / will it be maintained?
react-grid-dnd
A recent library only a year old. CodeSandbox demo.
Pros:
- Grid support included, with animations and logic
- Light on the source code
- Easy to use
Cons:
- Built by one dude last year, hasn't been updated since
- Relies on packages also built by that dude that haven't been updated in some time (though tbf, don't know if they need to be?)
gridstack.js
A library that's been out there for a long time. Abandoned a couple years ago, but has since been revived by a couple people.
Looking like the top contender so far, due to TS, active community as of now, and use of the HTML5 dnd API
Pros:
- Grid support included, with animations and logic
- TS
- HTML5 dnd API version (v3.0) released less than a month ago!
- No dependencies
Cons:
- HTML5 version released recently and mostly done by one dude it seems, so could be bugs
- The focus is not on React - does this matter in this case?
- Containment (no drag outside of parent) isn't implemented as of v3.1.2
- Additional layer of abstraction with
makeWidget
Notes:
- Demo code here
- Documentation mentions the need to make sure Gridstack is initialized and its methods used only after React has rendered the DOM. This is, however, the case for all virtualDOM frameworks. What differs is that this library doesn't abstract it away, I guess. Instead, there is
makeWidget
for adding elements to the Gridstack instance. - The state required for keeping track of items doesn't seem too bad, but will have to look more into how this would play with components, as the demo doesn't use those.
Other libraries
Are there more out there?
Questions:
- Would this library fit our needs? Is it actively maintained?
- How does this library implementation differ from others?
- What level of abstraction does this library provide? What will we not be able to customize?
jQuery libraries
There are several dnd libraries out there that use jQuery that have implemented grid dnd with animations. One example is https://muuri.dev/.
Pros:
- Vertical, horizontal, and grid dnd supported
- Animations and logic included
Cons:
- Introducing jQuery to the project
Questions:
- What is the cost of introducing a jQuery library, other than learning jQuery? Or would learning even be necessary (if the libraries expose just JS functions)?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.