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

121–130 of 147 posts

Re: Draggable objects

#121

Post by amitp »

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…

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/articles/curved-paths/making-of...

I think jQuery's drag and drop API is using the mouse events directly and not using the built-in dragstart/etc., and that's why they can apply constraints.

Re: Draggable objects

#122

Post by qingcharles »

layer8 wrote: 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…

Is there a different cancelation key used on other platforms, other than ESC that I should handle?

Re: Draggable objects

#123

Post by amitp »

rgovostes wrote: post #108

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

The way this code works, the drag motion updates some state. I can apply constraints when setting the state. Then the state drives the redisplay.

I wanted to separate the constraint system from the event handling system. Libraries like jquery-ui tie them together, so the event handling system has to know all the possible constraints. In jquery-ui, they support bounding box, axis, square grid, snapping to dom elements. But what if I wanted snapping to a hex grid, or a logarithmic scale grid, or a bounding circle? It's not supported.

In the code you'll see "state.pos = …". That's where the state is set. For constraints, I put "pos" behind a setter. Then the setter can apply the constraint, without the drag event handling code having to know what type of constraints are needed.

I should update the page to show some examples of constraints. I completely forgot to mention this aspect of the code recipe. (Thanks!)

I have some older examples of constraints at https://www.redblobgames.com/articles/curved-paths/making-of... and a prevent-collision example at https://redblobgames.github.io/circular-obstacle-pathfinding... . However I haven't tried drag-to-reorder or animated drop targets.

Re: Draggable objects

#124

Post by layer8 »

PaulDavisThe1st wrote: post #119
layer8 wrote: post #113

Earlier quoted context omitted.

This reminds me a bit of how double-click works, or originally worked: A single (first) click selects the element, and if there’s a second click within a short timeout period on the selected element, it invokes a default action on that element. Meaning, the double click is not a separate type of operation, it’s a continuation of what happens on a single click. You don’t wait after a single click to see if it becomes…

Historically, it differed on different windowing systems. The two versions featured the following event sequences: A: button press, button release, button press, button release B: button press, button press, button release This subtle difference leads to a world of difference in mid-level code.

Yes. However, if you select on the first button press (which I think is the usual behavior?), then it shouldn’t matter if you get a corresponding button release or not.

Option B allows to implement an “incompatible” single-click action, with the trade-off that it must be bound to the button release, not the (first) button press.

Re: Draggable objects

#125

Post by amitp »

SoKamil wrote: post #115

This idea in which you select a checkbox to highlight specific parts in code is actually a pretty good UX which I have never seen before.

Thanks! One of the big changes when I went from Java applets and Flash applets to HTML5 (around 2011–2012) was that I wasn't limited to only the diagrams being interactive, but I could make the rest of the page interactive too. I can change text and sample code. I can also embed widgets into text and sample code. An example is [1] where you can see the draggable numbers in the text and in the sample code, and those will change the diagram.

[1] https://www.redblobgames.com/articles/probability/damage-rol...

Re: Draggable objects

#126

Post by layer8 »

qingcharles wrote: post #122
layer8 wrote: 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…

Is there a different cancelation key used on other platforms, other than ESC that I should handle?

I’m not aware of any. What I meant to say is that I don’t known if that convention of cancelling drag&drop with Escape is as established on Mac and Linux as it is on Windows. But using the Escape key to indicate cancelling (e.g. a dialog) is pretty universal in GUIs, I would say.

Re: Draggable objects

#127

Post by amitp »

gowld wrote: post #39
adanto6840 wrote: post #17

Likewise, Amit is phenomenal and the content (and especially its presentation) is really second to none. The value he places on ensuring links stay working, and that content is accurate and updated — is truly phenomenal and almost inconceivable these days. I’ve also always enjoyed every (virtual) interaction I’ve had with him, however brief — and appreciate that he remembers me and the problems/challenges we faced in…

"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 :-)

Re: Draggable objects

#128

Post by qingcharles »

layer8 wrote: post #126
qingcharles wrote: post #122

Earlier quoted context omitted.

Is there a different cancelation key used on other platforms, other than ESC that I should handle?

I’m not aware of any. What I meant to say is that I don’t known if that convention of cancelling drag&drop with Escape is as established on Mac and Linux as it is on Windows. But using the Escape key to indicate cancelling (e.g. a dialog) is pretty universal in GUIs, I would say.

OK cool. Thank you. I'm not a hardcore Mac or Linux GUI user so I didn't know if I had missed something :)

Re: Draggable objects

#129

Post by amitp »

kibwen wrote: post #9
michaelwm wrote: post #6

Amit was an instrumental part in the development of one of my favorite video games, Realm of the Mad God. It was a masterpiece of the Flash game genre, and its guild feature introduced me to many lifelong friends.

RotMG has a great idea that I wish more games would copy: difficulty scales with elevation. If you want to take it easy, stick to the coasts. If you want a challenge, strike inland towards the mountains (or follow a river upstream). It's a great way of intuitively expressing difficulty ranges across a sprawling world map, and I remember being disappointed the first time that I played Skyrim that it didn't seem to do…

One of the map design goals in RotMG was that players could start playing solo on the coasts, and then as they moved up towards the mountains, the area would shrink so they would be more likely to meet each other. However, when we added teleportation the "forcing function" wasn't needed anymore. Players naturally wanted to play with each other. Also, a lot more players were high level so we needed more mountain land and less coastal land. For https://gasgame.net/ we're using a different design, where south is easier and north is harder. Relative to RotMG's map it shrinks the beginner areas and expands the veteran areas.

Re: Draggable objects

#130

Post by amitp »

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)
Post reply on HN