What's a great modern drag and drop javascript library you recommend?

Sorry for the non-answer but I use Draglua which is also unmaintained. It works and it’s nice and lightweight. I’m only using it on an internal app, though.

This blog uses sortableJS.
I haven’t used it personally, but if fly people are using it, makes me biased already.

Oh right, I should have mentioned Sortable, ha. It’s basically the defacto vanilla JS sorting library. I just like the way the way Dragula “feels” better but I’ve used Sortable and it certailny works well.

I am happy with Sortable JS, I wrote a custom hook with Liveview, similar to the one in the article

Sortable was extremely easy to integrate, and well maintained, and vanilla. Thanks for the suggestions guys!

import { ApplicationSortable } from "./hooks/applicationSortable.js";

let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: { ApplicationSortable }
});

export const ApplicationSortable = {
    mounted() {
        let group = this.el.dataset.group;

        let sorter = new Sortable(this.el, {
            group: group ? group : undefined,
            animation: 150,
            dragClass: "drag-item",
            ghostClass: "drag-ghost",
            forceFallback: true,
            onEnd: e => {
                let params = { old: e.oldIndex, new: e.newIndex, ...e.item.dataset }
                console.log(params);
                this.pushEventTo(this.el, "reposition", params)
            }
        })
    }
};

Note that SortableJS is not concerned with accessibility.

• What's the status on making SortableJs accessible? · Issue #1951 · SortableJS/Sortable · GitHub
• Any thought to making this accessible? (keyboard / aria) · Issue #1176 · SortableJS/Sortable · GitHub

I used Sortable and was very pleased with what I was able to do with it. I would share it but it’s in a project I made that never saw the light of day on the open Internet.

The todo_trek showcase app is using sortable.js as well.

https://github.com/chrismccord/todo_trek/blob/main/assets%2Fvendor%2Fsortable.js

There are similar issues on both Dragula and Draggable. Do you know of a vanilla JS lib that is accessible? I can’t seem to find one.

I didn’t find a maintained accessible JS library either. I guess one way to mitigate this is to use SortableJS, but also offer move-up and move-down buttons that are keyboard-accessible, if you can live with the additional UI elements.

Some general articles about accessible drag and drop:

https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09