simplywondrous/ss

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)?