News for hackers. Stuff that matters.

A comment on Red Blob Games: Interactive visual explanations of math and algorithms. Parent comment

Re:Red Blob Games: Interactive visual explanations of math a... by ww520 on Friday September 29, 2023 @04:31PM (#37709746)
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 used to support it. I'm trying to use the native DOM events/api only. Any information or pointers are greatly appreciated.

[ Parent | on HN ]
Re:Red Blob Games: Interactive visual explanations of math a... by kamikaz1k on Saturday September 30, 2023 @02:32AM (#37713233)
Unfortunately you can’t. That (draggable) API is not designed with that use case in mind.
[ Parent | on HN ]
Re:Red Blob Games: Interactive visual explanations of math a... by ww520 on Saturday September 30, 2023 @03:29PM (#37718884)
You’re right. I gave up after getting nowhere. The UX was not as nice but it was ok.
[ Parent | on HN ]
Re:Red Blob Games: Interactive visual explanations of math a... by amitp on Saturday September 30, 2023 @01:12PM (#37717487)
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.

[ Parent | on HN ]
Re:Red Blob Games: Interactive visual explanations of math a... by ww520 on Saturday September 30, 2023 @03:26PM (#37718856)
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.
[ Parent | on HN ]