solid-dnd
solid-dnd copied to clipboard
thisbeyond
Sortable movement constraints.
Hello there! I've stumbled across this toolkit today and I really liked what I saw, however I was missing a few user experience options, that I saw in libraries like JqueryUI. It would be awesome if those could be added as part of the Rewrite I read about in another Issue, or later down the line in another update. If wanted I can help out in developing these requested features, however, due to the planned Rewrite, opening an Issue first seemed like a smarter idea to me. (I am mainly referring to Sortable lists in this issue, since that is the feature I need for my project, however some of these ideas, might very well be useful for other draggable objects)
X/Y axis constraints:
When designing a App, like a TODO app or similar, you most often only want the users to re-arrange items in one direction, so X || Y, depending on if it's a vertical or horizontal sortable. With the current system, users are able to move the Component anywhere in the whole page, along any axis, which might be a bit confusing for the user experience. Inspiration: JqueryUI Axis
Parent constraints:
Currently a draggable container can be moved anywhere in the page without constraints. However, bigger sites with multiple Lists or overlapping UIs, might just want to limit the movement of a item to it's parent container. Inspiration: JqueryUI Containment
Thanks for the time, the toolkit looks pretty good 👍
Hey, I've been thinking about this recently as part of the refactor / update. I'm considering a "transformers" approach, but thinking about where to apply it.
I'm interested in your opinion - would you see this as needed only for the active draggable / overlay? Do you see a use case for affecting droppables at all in this way?
Hi! Transformers, as used in konvajs or some other library? I am afraid I don't know these too well, but seeing your current examples on the website, I am sure they can be taught well.
I see a use in constraining any active draggable inside a parent element, makes it easier to guide the user in which area they can operate. Not so much for limiting the X/Y axis movement for something other than a sortable list though.
This is now possible in 0.7.0 by applying a custom transformer. See example in release notes or on https://solid-dnd.com