DEV Community

Discussion on: 🚀 A powerful drag and drop implementation in just 16 lines of JavaScript

Collapse
mindplay profile image
Rasmus Schultz

It's kind of the wrong API for custom drag-and-drop operations - it's very limited in terms of what you can do with it, visually, and provides no real means of fine tuning the experience in terms of interaction either. It will let you go about as far as you went in this demo, but not much further.

I wouldn't recommend using the drag events API unless you need to drag to/from the desktop - for file uploads and such, about the only thing this API does well.

Unhappy with the complexity of drag-and-drop libraries myself, I started this library about four years ago:

github.com/mindplay-dk/zero-drag

It ended up a lot more complex than I would have liked - even if it is less than 200 lines of actual code (about 1K minified) when you get into all the details of these interactions (and even if this is a lot simpler than the libraries that also deal with the visuals) it's just a lot more complex than it seems. (On the up side, if you look at the examples of using it, those are about as simple as using the standard API.)

Note that this doesn't support touch events - I think that was the last remaining big push to finish this, but I've had no reason or inspiration to actually finish.

Maybe it inspires somebody else to do it. I'm a sure a lot has to do with taste, but I've really never seen a drag-and-drop library or approach that I really liked. 😉

Collapse
siddharthshyniben profile image
Siddharth Author

You are totally right, when we need customization this doesn't really work (like all native APIs 🤣). When you need a fully featured approach libraries may be the right way to go.

This does work for when you just need the minimal functionality. I was just pointing this out for awareness because I don't want you to bloat your code :D

Hoping in the future this API will get better tho, if it does it will be awesome!