Show HN: A cool Drag-and-Drop implementation for Svelte | Hacker News Reader

Show HN: A cool Drag-and-Drop implementation for Svelte

github.com

141 pointskhangnd43 comments

Very good job! The code is clear enough that even I understand it. I have been playing a lot with Svelte lately and I absolutely love it. As a backend guy I can finally be happy with whipping up a frontend or two without worrying or developing a week long headache. Thank you for doing and sharing this!!

I was researching drag and drop in JS recently, and what I found seemed pretty disappointing. Wondering if anyone can reinforce my opinion or counter it.

Drag and drop still seems like a mess. Browser support and touch support varies so you can't just use native APIs. Every popular library sits with tons of open issues and open PRs. Corporate solutions that have been open sourced appear abandoned. All the libraries I saw clocked in over 100kb.

Am I wrong? I want the "preact" or "day.js" drag and drop library. 10kb or less poly fill that gives me the basics. Does that exist?

This has been my experience too. Every React DnD library I have used has had some painful moments for me, sometimes super painful. For the app I am working on now I have pretty simple DnD needs so I just rolled my own using mouse events. it's about 100-200 lines of code total and works great.

To the library authors's credit, I think creating a general DnD library that can address most use cases is tough.

This is all I want, too. But if you go the DIY route, don't you end up chasing the long tail of browser and device compatibility issues and bugs? I typically solve my own issues but this one just seems like a huge and uneven surface area.

I would love to see your 100-200 lines if you are willing to share. Not asking you to ship it and support it and end up the N+1'th unsupported DND library though ;)

Yeah, rolling your own is probably a bad idea in most cases.

My implementation doesn't generalize at all really and I only need to support desktop browsers. If I ever own source this app I'll let you know. But basically I have one component listening to mouse events and firing callbacks with the rectangle the user has dragged (mouse down point to most recent mouse point), and with that my state manager updates things accordingly and drops upon mouse release.

Its sometimes worth going the DIY route, especially in this case. Drag and drop could cause all sorts of compatibility issues if you try very hard to generalize, sure.

I wrote my own as well, not in 100-200 lines granted. Dependency free ~300-400sloc using basic mouse events and element calculations were enough to implement advanced behaviors such as snapping, collision detection, free movement, packing, swapping, containerization. I had lots of freedom on how it behaves and was able to tweak it to what I wanted, something probably impossible with general dnd libraries. It works the same in most modern browsers I've tested, since it's only using DOM apis for basic events and style modification.

Libraries are great if you need established algorithms and data structures. Building out custom UX interactions, presumably like interacting with DOM objects, DIY was easier since there's actually very little work to do.

I share your disappointment and I'd like to invite you to DFlex (https://github.com/jalal246/dflex). It's not perfect and in the development process but I think it's a real alternative to native-like API focused on performance and easy implementation. It's just a pure js. So every fix should enhance all framework implementations. Decoupled with a separate package to prevent a bloated bundle. Work with mouse event, so nothing new to learn. And most importantly it's just a utility. You can use what you want. Finally, it doesn't sort, move,s or whatsoever. Node positions are stored separately. Each movement calculates the current position and triggers any effect that movement caused. So It may cause "dragging only with zero effect" Or "Switch with another element". It has also container/children architecture. So you can drag a child, or parent..etc

Edit: I have implementation for React and Vue but not for Svelet. So if anyone is interested let me know.

And congrats to Isaac for this nice work dedicated to Svelte community.

One of the up and coming React DnD projects is https://github.com/clauderic/dnd-kit. It's still in beta, and the drag/drop animations are rough around the edges, but it appears to be targeting an enterprise-grade set of features, including accessibility support.

Its core + plugin model will likely be the closest you can get to bundle size minimization.

Until the situation improves, for production, I use react-beautiful-dnd.

Long term, I think this might actually be a good problem to be solved in web components (e.g., using something like Stencil), then output targets for React, Svelte, Angular, etc can be generated.

React kit is an implementation of Shopify's famous package: https://github.com/Shopify/draggable It's great but complicated with strict API. While react-beautiful-dnd is so React-ish. To manipulate DOM you need pure js with a solution can expose DOM elements to you because you probably need to do more than dragging an element on your layout.

I've heard good things about dragula[0]. It's 9.8kb minified[1], no dependencies and browser support goes all the way back to IE7. There are also bridges for all the major frameworks.

[0] https://bevacqua.github.io/dragula/

[1] https://bundlephobia.com/result?p=dragula@3.7.3

can confirm that dragula works well. If you don't need all the crazy browser support though, doing it like this is much more lightweight.

Looks pretty solid to me. Good demos of some common edge-cases.

I wouldn't say "all" the major frameworks, though (just Angular[JS] and React).

There are also vue bridges, though admittedly unofficial.

That’s not no dependencies, it’s two direct dependencies, one of which is crossvent, which is 2.2kB of stuff that’s mostly not used (only around 0.6kB of it is used).

There are also a couple more transitive dependencies.

But the 9.8kB figure does include all the dependencies.

I actively hate spending bytes supporting IE (and especially such ancient versions as IE7), and if necessary maintain forks of any libraries I use to avoid doing so; so I tried ripping out IE support along with crossvent and a few obsolete and/or bad abstractions, and quickly got it down to 7kB minified, and I expect one so inclined could shrink it further. (The crossvent part can be done in two minutes, it’s that simple.)

I should really make a feature of this kind of thing on my blog, I enjoy doing it so much.

Nice! The API looks pretty good and simple to use. I love that the repo is full of examples. Starred.

The readme talks about it being keyboard operable and screen reader supporting but I couldn't make it work in the couple of REPLs I tried. The description of how keyboard operation is supposed to work looks good, uses standard keys.

https://github.com/isaacHagoel/svelte-dnd-action#accessibili...

This is a REPL only issue. It works "in reality". It will be looked at: https://github.com/isaacHagoel/svelte-dnd-action/issues/216

Very nice. A few nitpicks :

- You need to wait a bit for a drop target to become active, so when you try to move items quickly it's not registered and snaps back to the start location, is it something that is intended ?

- The animation is smooth with Edge but a bit janky with Firefox, as if it was animated at 10fps or so. It's probably Firefox's fault honestly. Also the border on dragged items is not shown with Firefox.

the duration of the animation is configurable via flipDurationMs (can also be set to zero). I don't notice any issue with ffx on my machine. the library lets svelte animate almost everything. pls create an issue with more details if you can (which example you used, which machine etc).

I cant drag&drop, it's more like drag&hover&waitForTheAnimation&drop.

the code is readable enough that you can just change the animation delay ;)

You can control the duration of the animation via the `flipDurationMs` option or turn the animation off. It is also possible to drop to the new position before the animation finished (but after it started).

Please don’t put a 10MB GIF in a page. Link to it instead, or better still to a video (GIF is an irredeemably bad format that no one should ever use any more).

And what are you talking about?

He's talking about the gif in the Github repo.

Yup, screenshot or two with links to 'see it in action' is much better way to go.

what else do you suggest as an alternative to GIF.

webm supports animations.

It’s a video. Video formats are designed for this sort of thing.

> GIF is an irredeemably bad format that no one should ever use any more

IIRC there is no other option if you want to include animation in a GitHub readme, as it will only include image formats inline that way. Otherwise you could use a video, which for this content would likely be larger but would have the advantage of being able to not auto-play.

Of course "don't include animation at all" would be a valid opinion, though not one likely to meet with universal agreement.

You can put animated svgs in github markdown.

I'm not sure that would help here. How would the author easily create so an SVG from the recording of his app/component in action?

Naive conversion will result in something much larger than the gif so not address the original complaint of "large chunk of auto-download/play content on the readme page".

Sorry, I was just responding to your comment on general:

> IIRC there is no other option if you want to include animation in a GitHub readme

Not the parent.

In any case, I wonder if it can be done with an embedded `video` tag. Maybe if the video is data URI encoded it could work?

You can use video on git hub pages (.io) instead.

I much prefer 10MB GIF in the README than looking around for a link to a video. It's not even slow to open, by the time I was had scrolled to it, it was running and to me the experience was seamless.

Nice, a new Svelte plugin. Thanks for sharing!

Svelte <3

Beautiful job! I love that you used an action and that the code is so clean. Thank you!

Impressive, is there something similar and as responsive for React?

Not sure how similar it is, but react-beautiful-dnd is pretty nice. https://github.com/atlassian/react-beautiful-dnd

I've implemented something similar using reagent which is a React wrapper for ClojureScript: https://www.youtube.com/watch?v=ibiK8sgwvqc

It works with stateful components too.

Whoa this is impressive! Very nice, thanks for building

I recently had to decide on a client framework for a side project. Svelte looked very nice, but still a bit hobbyist. At the end I decided on Vue3, but will keep a close eye on Svelte and wish all the best for this project.

Reply on news.ycombinator.com