Switch the drag and drop/sortable lists libraries to a better alternative

[andreslucena]

Describe the bug

Currently we're using two libraries for the drag and drop / sorting functionality available in different features:

• on surveys' questions of type "Sorting"
• when sorting the questions in the Surveys admin page
• when changing the order in a participatory text paragraphs/sections
• when changing the order of the landing page content blocks
• when changing the agenda items order in a meeting
• when changing the services order in a meeting edit/new form
• when changing the steps order in participatory processes admin page
• when changing the order in the external domains allowed list

These two libraries are Dragon Drop and html5sortable.

Expected behavior

Ideally we would use only one library for the same functionality, and that's what @alecslupu started doing on PR #12479. He decided to ditch "Dragon Drop" and use html5sortable, as the later one seems more maintained, but in the process he stopped as:

we are looking for alternatives to drag-on-drop which is using an unmaintained core-js library.
Also, we need to move away from html5-sortable as it currently not supporting the accessibility reordering, and also the readme of the lib is stating that is looking for comaintainer.

So, we're in the process of seeing the different alternatives and pros and cons between them. The requirements are:

• Works across all major browsers without issues
• Has good accessibility support
• It's implemented in vanilla JavaScript (without frameworks)

Just for comparison purposes, I've added the current two libraries that we're planning moving from it.

Alternatives

Dragon Drop

GitHub: https://github.com/schne324/dragon-drop
Site & demo: https://schne324.github.io/dragon-drop/demo/
NPM: https://www.npmjs.com/package/drag-on-drop

One of the current libraries that we're using.
It didn't have any release nor commits in the last years.
Only 4 contributors.

Stats

• ⭐ 401 GitHub stars
• ⚠️ 12 GitHub issues
• ➡️ 5 GitHub pull requests
• 👯 4 contributors
• 🚀 Latest release: 2021-07-04
• ✏️ Latest commit: 2021-04-29

SCC

Language	Files	Lines	Blank	Comment	Code	Complexity	Bytes
JavaScript	1	9099	280	215	8604	460	313210

html5sortable

GitHub: https://github.com/lukasoppermann/html5sortable
Site & demo: http://lukasoppermann.github.io/html5sortable/
NPM: https://www.npmjs.com/package/html5sortable

One of the current libraries that we're using.
It didn't have any release nor commits in the last years.
Actively looking for a co-maintainer
Only 2KB (minified and gzipped).
Built using native HTML5 drag and drop API.

Stats

• ⭐ 1601 GitHub stars
• ⚠️ GitHub issues
• ➡️ GitHub pull requests
• 👯 76 contributors
• 🚀 Latest release: 2021-07-04
• ✏️ Latest commit: 2021-04-29

SCC

Language	Files	Lines	Blank	Comment	Code	Complexity	Bytes
JavaScript	1	1310	24	405	881	181	54915

Sortable

GitHub: https://github.com/SortableJS/Sortable
Site & demo: https://sortablejs.github.io/Sortable/
NPM: https://www.npmjs.com/package/sortablejs

Supports touch devices and modern browsers (including IE9).
Built using native HTML5 drag and drop API.
Big community.

Stats

• ⭐ 28450 GitHub stars
• ⚠️ 433 GitHub issues
• ➡️ 25 GitHub pull requests
• 👯 153 contributors
• 🚀 Latest release: 2024-01-14
• ✏️ Latest commit: 2024-01-14

SCC

Language	Files	Lines	Blank	Comment	Code	Complexity	Bytes
JavaScript	1	3362	118	308	2936	898	125080

interact.js

GitHub: https://github.com/taye/interact.js
Site & demo: https://interactjs.io/
NPM: https://www.npmjs.com/package/interactjs

Supports touch devices and modern browsers (including IE9).
Supports more features (see the demo), but the most important for us (sortable lists) seem to be only available in the Pro version (to be released).

Stats

• ⭐ 11951 GitHub stars
• ⚠️ 63 GitHub issues
• ➡️ 6 GitHub pull requests
• 👯 51 contributors
• 🚀 Latest release: 2023-12-07
• ✏️ Latest commit: 2023-12-10

SCC

Language	Files	Lines	Blank	Comment	Code	Complexity	Bytes
JavaScript	1	7609	251	580	6778	1125	253710

Other alternatives

In the research process there were some libraries that were discarded as they don't seem to be maintained anymore:

• dragula
• drag-helper

Extra data

• Decidim Version: 0.29.0.dev

Acceptance criteria

All these features work with sorting:

• changing the order of surveys' questions of type "Sorting"
• changing the order of the questions in the Surveys admin page
• changing the steps order in participatory processes admin page
• changing the order in the external domains allowed list
• changing the order in a participatory text paragraphs/sections
• changing the order of the landing page content blocks
• changing the agenda items order in a meeting
• changing the services order in a meeting edit/new form
• there are no longer references to Dragon Drop nor html5sortable in the codebase
• these two libraries are no longer dependencies

---

At the moment the most promising is Sortable. We kindly ask the community to provide more alternatives in the next following weeks, so we can reach to an agreement April 5th.

[andreslucena]

Sidenote to @decidim/product:

when changing the order in the external domains allowed list

While seeing this feature I asked myself if does this even make sense. Do we need/want to order the external domain list order? (Maybe there's a technical reason that I'm missing?)

[alecslupu]

I have investigated the Sortable library, and my first remarks would got in the sense the library is not accessible as per SortableJS/Sortable#1951 and online demos.

In my searches, i have found this 3 part article, which could be what we are looking for:

https://www.tpgi.com/the-road-to-accessible-drag-and-drop-part-1/
https://www.tpgi.com/the-road-to-accessible-drag-and-drop-part-2/
https://www.tpgi.com/the-road-to-accessible-drag-and-drop-part-3/

Licensing: https://creativecommons.org/licenses/by-sa/4.0/
And as functionality it provides:

• I18n support
• Drag and drop on mobile
• Accessibility on desktop ( using keyboard )

[andreslucena]

In my searches, i have found this 3 part article, which could be what we are looking for:

Looks really good, I'll send ti to @decidim/product so we can check it out too.

Demos:

• https://cdpn.io/pen/debug/poGMNzL
• with sorting (for surveys sorting answer type) https://cdpn.io/pen/debug/WNPVoag

[andreslucena]

We've been checking out the new proposed approach in @decidim/product meeting, and we've several doubts about it:

1. We missed a couple of affordances that we have in the current UI: the ✢ icon next to the draggable item and the cursor on hover
2. We liked that it's shown where you can drag to, but we didn't like the blue/green and think it could be too different to our current admin interface
3. As the different use cases of the sortable lists have different UI, the examples provided need adaptation for our uses cases: it works well for the "Landing page" (aka Content blocks) page, but for others (like questions in surveys) would need to be adapted to what we have.

As there are lots of doubts, what we have discussed is to allocate design resources to this issue once we have a designer working for us, so we can have an approach that works for our different use cases.