Live data from Hacker News

Draggable objects

redblobgames.com

141–147 of 147 posts

Re: Draggable objects

#141
post #104
post #93

Earlier quoted context omitted.

The cursor is often rendered with special GPU acceleration like when using Hardware Cursor, making it as responsive as possible, but that does mean there’s always going to be a slight delay for the draggable object

But this doesn't happen in native UIs. I think this is because JS event handlers are asynchronous and not running within native event loop.

The way Windows handles it seems to be that hardware rendering of the pointer is turned off when you drag around windows. It was very obvious when I was using f.lux, the bright white pointer would turn yellow like the rest of the screen when dragging.

Maybe you could try turning the actual cursor invisible when dragging and instead render a custom drag cursor parented to the object being dragged.

Re: Draggable objects

#142
post #120

Earlier quoted context omitted.

I used to write browser UI code all the time, but it’s been a few years. This is the first I’ve heard of someone using pointer events. Do you worry at all about someone’s browser not supporting them, given that Safari added support in 2020? I guess Safari 12 is hopefully no longer used in practice, with macOS Mojave users hopefully running Safari 13 or 14? It would be pretty bad if something as simple as dragging did…

I don't worry about it. I usually wait a few years before using some browser feature. I'm not writing a production app and I have no customers. If I had customers, then I'd be looking at what browsers they use and making a decision based on that. This page is not prescriptive : I'm not trying to tell everyone else what to do. This page is descriptive : I'm trying to document what works for me. For the use cases I nee…

Thanks!

Re: Draggable objects

#143
A bit off topic, but this site looks great! I see it has many great articles about algorithms with interactive visualizations. Why I didn't know this site before?!

Anyone has some more recommendations of sites with similar content (easily explained algorithms with great interactive visualizations? )

Re: Draggable objects

#144

One thing missing: accessibility. how ought facilitate drag using keyboard controls?

tab / space / enter to select an item, crtl + arrow keys to move the "dragged" element. Obviously, it can only move one block per keystroke.

Re: Draggable objects

#145
post #112

The article doesn’t seem to discuss cancellation. For example, there is the convention (at least on Windows) that pressing Escape cancels the dragging. Sometimes you also want to cancel the dragging when the mouse-up happens outside of some defined area. Cancellation serves as a quicker Undo (or an “oh, I actuality didn’t mean to drag”) for the user. In any case, this means that you have to save the original state at…

>Sometimes you also want to cancel the dragging … outside of some defined area.

But that Windows > when you drag something too far so the dragged object and the pointer just suddenly disappears, and snaps back to the original position without warning!

Can’t believe Microsoft still believes that is smart UI design. It utterly confuses users. You may even see them caught in a yo-yo situation or just scared to release the left mouse button while they don’t know what’s happening

Cancellation is a huge often overlooked issue - I agree with you and it’s not a simple issue. Common users don’t know that ESC can help.

Re: Draggable objects

#146
post #114

Earlier quoted context omitted.

I have a trick for this that I love that is very general: 1. When a user begins dragging, calculate the layouts for all possible drop targets (or perhaps just those that are currently visible). 2. For each of those layouts record the position the dragged objects ends up in. 3. On each mouse movement, select from those positions the one that's closest to the dragged object's current position 4. Render the selected lay…

> record the position the dragged objects ends up in Can you explain this in more detail? Don’t you need to actually change the layout to figure this out correctly? Or are you approximating it with the top/left corner of the current element in the same place or something? EDIT: I read to fast, for some reason I understood step 1 as figuring out the location/bounding box of each drop target, but I think you mean to ac…

Yes, that's what I mean.

Re: Draggable objects

#147
post #97

Am 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/

Oh wow, FidoNet, that brings back memories. :-) I still miss Usenet of old.

Agree - I was active enough on Usenet that at one point a book publisher sent me a box of books because apparently I had helped out one of their authors, and he asked them to do so. (Wiley FTW)
Post reply on HN