Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Draggable objects

redblobgames.com

Post reply on HN
Print view View original

101–110 of 147 posts

Re: Draggable objects

#101

Post by slivanes »

alexbock wrote: post #85
pupppet wrote: post #72

Earlier quoted context omitted.

Oof, or drag-to-reorder while supporting nesting.

I've always been surprised that Apple added this functionality to the iOS home screen without having a solution to the reorder vs nesting UI problem. Trying to move an app into a folder often results in the folder deciding to fly out of the way and let the item take its place when you're really trying to drop something on the folder to insert it.

In IOS, I'm pretty sure you cannot add an app that currently sits on the far right of the screen to a folder anywhere beneath it.

Re: Draggable objects

#102

Post by fingerlocks »

slivanes wrote: post #101
alexbock wrote: post #85

Earlier quoted context omitted.

I've always been surprised that Apple added this functionality to the iOS home screen without having a solution to the reorder vs nesting UI problem. Trying to move an app into a folder often results in the folder deciding to fly out of the way and let the item take its place when you're really trying to drop something on the folder to insert it.

In IOS, I'm pretty sure you cannot add an app that currently sits on the far right of the screen to a folder anywhere beneath it.

Just tried this, and you can. But it definitely takes more finesse than any other column.

Re: Draggable objects

#103

Post by nayuki »

dang wrote: post #51
sh1mmer wrote: post #50

Earlier quoted context omitted.

FWIW, dang, while I know guidelines are to post specific things for me personally “check out this collection of interactive tutorials” is actually a lot more interesting/helpful than linking to a single tutorial, especially when it’s not clear from that tutorial it’s part of a collection larger collection. Generally I feel like links to collections of stuff do well when they are interesting and don’t when they aren’t…

I hear you and am certainly not denying the usefulness of the site! it's fabulous and has been fabulous for many years. It has also made many great appearances on HN over the years: https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... . But if we're to optimize HN for intellectual curiosity ( https://hn.algolia.com/?dateRange=all&page=0&prefix=true&sor... ), we have to consider thread quality, and there's…

I appreciate your work and all, but this URL change disoriented me. I upvoted the submission when it was pointing to the root page of the website.

Coming back to the thread half a day later now, I suddenly found that I upvoted the page "Draggable objects" despite never having previously visited or hearing of the page.

I read the new page anyway and liked it. But it contradicts the original my intent of the upvote and essentially gaslights me into a fictitious past.

Re: Draggable objects

#104

Post by marwis »

ly wrote: post #93
marwis wrote: post #91

Is 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?

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.

Re: Draggable objects

#105

Post by Nezteb »

aboodman wrote: post #83
wildrhythms wrote: post #67

This 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…

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…

I was bored so I made a super simple implementation of this: https://codepen.io/Nezteb/pen/MWZBapL

Re: Draggable objects

#106

Post by kamikaz1k »

ww520 wrote: post #63
amitp wrote: post #38

Thank you everyone! What a surprise to be on HN today. Happy to answer questions!

That is a fantastic discussion on dragging with Javascript. Really appreciate the information. I've a quick question. How do you restrict the dragging movement to an axis using the built-in DOM events like dragstart/etc. I had a drag & drop feature implemented using the dragstart/dragenter/dragover/drop/etc events. I couldn't find a quick way to restrict the dragging movement to the x-axis. JQuery's drag and drop API…

Unfortunately you can’t. That (draggable) API is not designed with that use case in mind.

Re: Draggable objects

#107

Post by hutzlibu »

PaulDavisThe1st wrote: post #81

One extra detail, something I've learned from 20 years of working on dragging all kinds of objects around the GUI of Ardour [0]: handle ALL button press and release events as drag events where there is no movement. That is: press ALWAYS starts a drag that is finished by the release, and the code that handles release "special cases" the no-movement condition. [0] https://ardour.org/

That should also work, but I did not do it this way and had no problems after I got the basics right. I have general mousedown and mouseup handlers and use a timeout(~150 ms, but configurable), to determine if we deal with a click, or start dragging (or other things). And on mouseup (or if the mouse leaves the screen) and there is dragging in progress -> stopdrag. So dragging for me ist just one of different special cases ..

Re: Draggable objects

#108

Post by rgovostes »

The article implements relatively basic dragging (notwithstanding the several edge cases that arise with web browsers). Are there resources on dragging with constraints such as snapping to guidelines, preventing collisions with boundaries or other objects, or animated drop targets that resize or move in response to the drag operation?

I once wanted to make a customizable Pomodoro timer UI based on subdividing a circular clock into wedges of different durations to define your focus/break intervals. I didn't get very far trying to implement drag-to-reorder of the wedges.

Re: Draggable objects

#109

Post by diath »

Nezteb wrote: post #105
aboodman wrote: post #83

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…

I was bored so I made a super simple implementation of this: https://codepen.io/Nezteb/pen/MWZBapL

That doesn't seem to work in Firefox:

> TypeError: input.getBoundingClientRect is not a function

Re: Draggable objects

#110

Post by zubairq »

Great article! Yeah, I can remember going through a hugely painful time trying to get drag and drop working between the web version of an app on PC, tablets, and phone. I think I dropped the phone support in the end though due to the fact that dragging and dropping just didn't feel right on the phone, tapping felt more natural.
Post reply on HN