I once tried throttling updates via requestAnimationFrame but it didn't help much. Perhaps movement prediction?
Draggable objects
91–100 of 147 posts
Re: Draggable objects
#92One thing missing: accessibility. how ought facilitate drag using keyboard controls?
In my example, the answer to the question about accessibility is to additionally provide keyboard controls to complete the task (preferably ones that don't - or optionally don't - require holding a key). For example perhaps a key shortcut to enter a pan mode, in which the arrow keys move the viewport around the canvas. Problem solved.
As for draggable objects, the task is re-ordering. How do you make that accessible? Provide an alternative means to re-order objects, perhaps using TAB to cycle focus through the objects, then a key to select the focused one, and use the arrow keys to move the drag preview to the nearest valid position in that direction.
Re: Draggable objects
#93Is there any way to reduce lag between pointer and draggable? I once tried throttling updates via requestAnimationFrame but it didn't help much. Perhaps movement prediction?
Re: Draggable objects
#94This article is about dragging, and I've run into all of the pitfalls and come to the same solutions that Amit talks about. Excellent article! One of the hardest things I have needed to code from scratch is drag-to-reorder. It seem so natural from a user perspective, but when you get into inconsistently sized items, having to create placeholders between items, detecting edges, going down rabbitholes of box-fitting al…
Re: Draggable objects
#95It involved dragging.
I loved the 2am conversations that resulted. My idea was that dragging need not respect real-world physics. Dragging should feel like a great tab of acid. And everyone was into this, everyone had ideas.
Re: Draggable objects
#96This article is about dragging, and I've run into all of the pitfalls and come to the same solutions that Amit talks about. Excellent article! One of the hardest things I have needed to code from scratch is drag-to-reorder. It seem so natural from a user perspective, but when you get into inconsistently sized items, having to create placeholders between items, detecting edges, going down rabbitholes of box-fitting al…
Re: Draggable objects
#97Am going to chime in as well - Amit is amazing and has been providing his knowledge and experience since the early 90's, when I first encountered him on FidoNet over BBS, then next on Usenet. Regular tech blog: https://amitp.blogspot.com/ Game Dev blog: https://simblob.blogspot.com/
Re: Draggable objects
#98Amit Patel is the man. I always say his last name like Matthew Patel says his name in Scott Pilgrim. Side note: Sebastian Lague is great too.
> I always say his last name like Matthew Patel says his name in Scott Pilgrim One of the seven evil hexes :D
Re: Draggable objects
#99Earlier quoted context omitted.
Can you please nominate a specific URL on your site that we can change the top link to? (see https://news.ycombinator.com/item?id=37707904 for why) What's your most interesting piece that hasn't gotten sufficient attention yet? I believe HN has had many great threads about the A* and hexagonal grid articles over the years. Is there a comparable one that's been overlooked so far?
This year I've mostly been updating existing pages in small ways (examples: [1] [2]). This week I've been fixing broken links, which isn't a good HN submission. I think the best candidate is https://www.redblobgames.com/making-of/draggable/ . It's from earlier this year and hasn't been posted to HN yet (I think). [1] https://simblob.blogspot.com/2023/04/explaining-hexagon-layo... [2] https://simblob.blogspot.com/2023…
Re: Draggable objects
#100I was just implementing dragging an SVG element in a Vue app earlier this week, and had to discover pretty much everything the author describes in the article, even in the same order the author describes them, and ended up with pretty much an identical component to do so (except I wrote a composable utility `useDragging` instead of a functional component ``).