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

Phoenix Forum Chat / Discussions
21

Looking at muuri I noticed the author was/is writing a new set of libraries, one of which is GitHub - niklasramo/dragdoll: Modular and extensible drag & drop system..

7 Likes
22

JS world changes so quickly! Thanks for this, I will move with the herd (pack together strong) and switch to this “Dragdoll” lib.

23

That is really nice. Muuri is also really nice but more general.

I’m just doing some drag and drop work now and I’m doubling down on Dragula. For the use-case of simply moving things within and between lists, it works super well. It’s also considerably smaller than Sortable (14k v. 44k). Even though it “strongly recommends” using npm, I just throw the dist files in assets/vendor.

Oddly enough it was updated two weeks ago for the first time in four years. It was only the README and examples that got touched, but maybe that means the author has taken interest again? I dunno. In any event, it still works great, which is a refreshing thing in the JS space :slight_smile:

Quite unfortunately, it does not have keyboard events. That’s obviously a non-starter for some.

EDIT: I misspoke—while it does not come out of the box, the API allows for rolling your own keyboard shortcuts with relative ease if you’re at all comfy with JS.

24

The documentation for Pragmatic Drag and Drop looks really nice, but is actually not that great - all the examples are tons of verbose React, a bunch of the links are broken, and there’s no actual API docs that I can see.

I’ve been trying to get it working nicely like their examples in a Phoenix app, and so far it’s not going too well.

2 Likes
25

I was unable to get dragdoll to work in Phoenix. I tried many different approaches and kept hitting the same error. I actually made an issue for it.

Personally, I find dragdoll to be unusable in Phoenix right now. If somebody reading this gets dragdoll working with Phoenix, please share your code.

I am sticking with Muuri for my drag-n-drop stuff.

1 Like
26

I must reply to myself.

The dragdoll issue was a very easy “fix”

So dragdoll does work with Phoenix LiveView.

2 Likes