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

Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browsers. Modern browsers may have shiny new API’s that are not being leveraged by older plugins.

What’s a great, modern drag and drop plugin you would recommend?

One feature I’m trying to build: I’m trying to replicate the Trello list drag and drop feature where you can drag cards between lists, and drag the lists around as well.

One plugin I found is draggable by Shopify: Draggable JS – JavaScript drag and drop library But it’s not maintained anymore, and has a ton of open PRs.

Another plugin is Sortable: GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

Thanks!

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.

1 Like

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

8 Likes

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

3 Likes

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)
            }
        })
    }
};
2 Likes

Note that SortableJS is not concerned with accessibility.

3 Likes

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.

1 Like

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://dev.opera.com/articles/accessible-drag-and-drop/

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

5 Likes

I always reach for https://dndkit.com myself.

3 Likes