7 ms·
Show HN: A cool Drag-and-Drop implementation for Svelte
- petargyurov 6y agoNice! The API looks pretty good and simple to use. I love that the repo is full of examples. Starred.
- chrismorgan 6y agoPlease 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).
- khangnd 6y agoAnd what are you talking about?
- r6203 6y agoHe's talking about the gif in the Github repo.
- gen_greyface 6y agowhat else do you suggest as an alternative to GIF.
- jansan 6y agowebm supports animations.
- chrismorgan 6y agoIt’s a video. Video formats are designed for this sort of thing.
- g0ran 6y agoYup, screenshot or two with links to 'see it in action' is much better way to go.
- dspillett 6y ago> 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.
- davidmurdoch 6y agoYou can put animated svgs in github markdown.
- dspillett 6y agoI'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".
- davidmurdoch 6y agoSorry, 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?
- mzs 6y agoYou can use video on git hub pages (.io) instead.
- belval 6y agoI 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.
- ghenson2 6y agoImpressive, is there something similar and as responsive for React?
- deckplecksetter 6y agoNot sure how similar it is, but react-beautiful-dnd is pretty nice. https://github.com/atlassian/react-beautiful-dnd https://github.com/atlassian/react-beautiful-dnd
- simongray 6y agoI've implemented something similar using reagent which is a React wrapper for ClojureScript: https://www.youtube.com/watch?v=ibiK8sgwvqc https://www.youtube.com/watch?v=ibiK8sgwvqc It works with stateful components too.
- ilovefood 6y agoVery 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!!
- NetOpWibby 6y agoNice, a new Svelte plugin. Thanks for sharing!
- panta 6y agoBeautiful job! I love that you used an action and that the code is so clean. Thank you!
- jansan 6y agoI 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.
- UltimateBallR 6y agoWhoa this is impressive! Very nice, thanks for building
- faeyanpiraat 6y agoI cant drag&drop, it's more like drag&hover&waitForTheAnimation&drop.
- wirahx 6y agothe code is readable enough that you can just change the animation delay ;)
- isaac-hagoel 6y agoYou 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).
- tekstar 6y agoI 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?
- city41 6y agoThis 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.
- tekstar 6y agoThis 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 ;)
- city41 6y agoYeah, 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.
- 6y ago
- extra88 6y agoThe 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#accessibility-beta https://github.com/isaacHagoel/svelte-dnd-action#accessibili...
- isaac-hagoel 6y agoThis is a REPL only issue. It works "in reality". It will be looked at: https://github.com/isaacHagoel/svelte-dnd-action/issues/216 https://github.com/isaacHagoel/svelte-dnd-action/issues/216
- kokizzu2 6y agoSvelte <3
- ajnin 6y agoVery 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.
- isaac-hagoel 6y agothe 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).