Restrict draggable element not to go out of viewport.

[gokatz]

If we drag the element out of the viewport, we cannot bring them back to the viewport. Is there any way we can restrict dragging out of the viewport.?

[lmiller1990]

This is something we should support and would be fairly easy to do so.

Do you mean that any part of the boundary of the draggable object should not be allowed outside of the viewport?

I think this should probably be the default behavior.

[lmiller1990]

I will be working on and hopefully releasing this over the weekend @gokatz 👍

[gokatz]

Thank you so much @lmiller1990

[lmiller1990]

Added this @gokatz - please try it out. Not perfect but I think it can help you. Any feedback is welcome (not sure of your use case).

Install latest vers. with npm install @branu-jp/v-drag@latest

Added to the options https://github.com/branu-ws/v-drag#options , you can now use a window-only modifier.

<div v-drag.window-only>
  This element cannot be dragged outside the window
</div>

[gokatz]

Thanks again for this @lmiller1990. Will try this and let you know.

Just to clarify, my case is that the draggable element is a trigger to open a widget in a page. The user can drag the trigger anywhere on the page and while clicking the trigger, the widget will be toggled. I needed this option to restrict the user from dragging the container outside the window and if they do so, they cannot pull back the trigger.

[lmiller1990]

ok - this (should) work for that use case. Let me know!

[lmiller1990]

@gokatz was this okay?

[gokatz]

Yeah. Perfectly works for my case @lmiller1990. one little thing that I wish to clarify.
In this sandbox, https://codesandbox.io/s/r4nr1nq0vp, when the draggable element is dragged to the edge of the viewport, scrollbars began to appear. Am I missing something?

[lmiller1990]

Huh, it happened on the right and bottom areas. Maybe the check if not triggering fast enough, and before x/y location is constrained, the browser moves the viewport to accommodate.

I'll be improving this on the weekend, for sure. Glad this is at least working for your use case, thanks for the feedback.

[gokatz]

Anytime. Thanks for your time 🙂