Jump to content
Search Community

Proper use of the bounds property for draggable

ebinabo test
Moderator Tag

Recommended Posts

Hello guys,

 

I'm trying to get a region to be able to drag the whole width of the box. Some items are spilled out and overflow is hidden. Trying to get the same effect as a slider in a mobile horizontal scroll or kind of like swiperjs. 

 

The bounds property holds true until there's more than 1 element there then it breaks 

See the Pen PowRWJr by ebinabo (@ebinabo) on CodePen

Link to comment
Share on other sites

4 hours ago, mikel said:

Hey @ebinabo,

 

Do not 'limit' the value left to -100.

Try for example this

 



Draggable.create('.draggable', {
    bounds: {right: 0, left: -1300},
    type: 'x'
})

 

Happy dragging ... 

Mikel

 

 

Hey @Mikel, I tried this and it didn't work, immediately you add for both directions the right boundary stops working

Link to comment
Share on other sites

2 hours ago, mikel said:

 

Do you mean it should look like a filmstrip?

 

 

@mikel yes actually, really close to this. I want the black background to be constant then the inner boxes to resemble a filmstrip and you shouldn't be able to scroll beyond the left margin of the first box and the right margin of the last. An example could be seen on limnia.com 's homepage at about 70% of the page

 

 

 

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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...