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

131–140 of 147 posts

Re: Draggable objects

#131

Post by runarberg »

amitp wrote: post #130
runarberg wrote: post #100

Love this. I 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 ` `).

Cool! I've tried a directive and tried a component (with slots) but I haven't tried a composable, mainly because I wasn't sure how to set up event handlers that way. (I don't have a lot of experience with composables)

I think a directive is actually a better idea. With a composable I basically just accept a ref of the target element and set up the event handlers directly on it (with useEventListener composables).

Re: Draggable objects

#132

Post by 8n4vidtmkvmk »

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.

Android has the same problem. Sometimes it lets you drop inside, sometimes it flies away.

Re: Draggable objects

#133

Post by 8n4vidtmkvmk »

PaulDavisThe1st wrote: post #90
wruza wrote: post #86

Earlier quoted context omitted.

What’s the rationale here?

Having separate code paths for "it's a press", "it's a release", "it's a drag" just turns into a nightmare when you actually use all 3 input events extensively. Remember that while the motion events of the drag might be the visually interesting part, for the most part the interesting stuff happens at the beginning and end of them - i.e. the press and release. It becomes massively simpler conceptually (and even in the…

Minimal movement* I allow a few pixels for Shakey slow hands.

Re: Draggable objects

#134

Post by ww520 »

amitp wrote: post #121
ww520 wrote: post #63

Earlier quoted context omitted.

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…

I don't know how to do that with the built-in drag-and-drop API. With mouse or pointer events: 1. When I get the event, I update the underlying state , but leave the DOM element alone. 2. I can apply constraints to that state. To restrict dragging to the x-axis, I would never change y. 3. I use the state to drive the redisplay of the DOM element. Some examples of constraints I want: https://www.redblobgames.com/artic…

I see. Thanks for the info. It seems the problem is that the item being dragged is a temporary image copy of the source element, not the source element itself. That makes controlling the position of the source element irrelevant. Needs to somehow control the position of the temporary image copy to make it work. But anyway it’s a good learning exercise. Thanks for the discussion.

Re: Draggable objects

#135

Post by ww520 »

kamikaz1k wrote: post #106
ww520 wrote: post #63

Earlier quoted context omitted.

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.

You’re right. I gave up after getting nowhere. The UX was not as nice but it was ok.

Re: Draggable objects

#136

Post by Nezteb »

ellyagg wrote: post #116
Nezteb wrote: post #105

Earlier quoted context omitted.

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

I thought they meant the object automatically snaps to the nearest target in real-time.

The person who described the algorithm made it that way, but I added a `const closeEnoughToSnapDistance = 200` to make it more like Trello; once you get close enough, it will snap.

Re: Draggable objects

#137

Post by Nezteb »

orlp wrote: post #111
Nezteb wrote: post #105

Earlier quoted context omitted.

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

Doesn't work with touch.

I'm not surprsied. I suck at CSS and just wanted a basic/brittle example that worked in Chrome. Anyone is free to fork my CodePen and make it better though. :D

Re: Draggable objects

#138

Post by Nezteb »

diath wrote: post #109
Nezteb wrote: post #105

Earlier quoted context omitted.

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

Womp womp; I'm not sure why. Someday I'll try it out on Firefox and maybe fix it.

Re: Draggable objects

#139

Post by adanto6840 »

amitp wrote: post #127
gowld wrote: post #39

Earlier quoted context omitted.

"If you’re in the Silicon Valley area and want to chat in person, email me at redblobgames@gmail.com. "

Context: I had been planning to visit adanto6840 on a road trip planned for March 2020, but then … the pandemic hit and I had to cancel those plans. But one day I will take that road trip :-)

Looking forward to it! :)
Post reply on HN