Jump to content

JQuery draggable navigation


alpinfinitz
 Share

Recommended Posts

Hi, I was working a little bit with JQueryUI in the past, and really like the draggable function. My idea was now, to create a navigation with that. For this I have my navigation as usual in a unsorted list, without a second level. The idea now is, to display the menu items as blocks (similar to windows 8 icons) in a row. The navigation has got a fixed height, so the elements can just be dragged on x-axis. Its not possible to drag a single element, just all items together. It is working so far, by using JQuerUI with the draggable function and the attribute x-axis, as explained on the JQuery homepage. But now I wanted to limit the draggable area to the left and right border, because it was possible to shift the whole menu outside of the viewport. Because of the fact, that my draggable object is wider than the container, I cant use the containment attribute, because then the draggable object is snapping to the borders, and a smooth drag is not possible. Do I use the draggable function the correct way, or am I on the wrong track? Thank you for your help and forgive my bad english :) Cheers

Link to comment
Share on other sites

I don't really understand the problem. You say that you want to constrain the draggable object to the viewport, but the draggable object is bigger than its container. How does that work? If you have overflow: hidden on the container then the draggable object wouldn't go outside the viewport, it would get clipped inside the container.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...