3 ms·

That is a fantastic discussion on dragging with Javascript. Really appreciate the information. I've a quick question. How do you restrict the dragging moveme

by ww520 3y ago

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.

kamikaz1k 3y ago
Unfortunately you can’t. That (draggable) API is not designed with that use case in mind.
- ww520 3y ago
  You’re right. I gave up after getting nowhere. The UX was not as nice but it was ok.
amitp 3y ago
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.html 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.
- ww520 3y ago
  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.

by ww520 3y ago

kamikaz1k 3y ago

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

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

amitp 3y ago

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.html 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.

ww520 3y ago
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.