Code works on individual page but not within index page

Site URL: https://tjr-new-site.squarespace.com/

hey hey! I'm using a code block (with HTML + JS, then CSS) to create a draggable block section. Under 'About.' (Brine/Rally 7.0)

These images under 'About' can be moved around the page with cursor by a visitor. I used CSS to set the starting location of each individual image. When you view the section of the index page as its own page, it works as it should. When the section is viewed within its index page home, the images cannot be moved to the left on the x-axis.

• Works (able to slide img around): https://tjr-new-site.squarespace.com/about
• Does not work (img can't move to the left past its starting place): https://tjr-new-site.squarespace.com scroll down to About

pw: troysitehelp

Any ideas on why it works in one place and not the other, and how to address? Thx.

you're specifying "#about" for your containment option, which means "find me the element with the id 'about' in the document". this element doesn't exist in the page that you think is working, but does in the page that you say does not work.

This means that in the "working" page, because it can't find the about element, it defaults to having no containment set. In the non-working one, you're containing it to the about id, which is the section of the index page. there's an issue here though with the way that squarespace or the template positions that element, which means that the draggable code doesn't work as you might expect.

to fix it, I would just remove the containment option. that way you'll get consistent behaviour between both.  that behaviour will actually be limited to the code block though because I think squarespace will hide the overflowing space. 

https://api.jqueryui.com/draggable/#option-containment

I would add that it's probably not quite right to set the position of the image inside the draggable div using CSS. this is because it then positions the image outside of the draggable div. It does work in this case, but it does some strange positioning because the draggable library is changing the position of the containing div NOT the contained image. 

this effect is actually what's causing the odd behaviour in your "non-working" example:

• jquery contains the draggable div to the "#about" section
• buy you have moved the image say 300px to the right of the draggable div
• so when you're moving the image around, it's the div that's contained (which is now 300px out). the div is stopping at left:0 which is where they all begin until you move the images with css

If you reposition the draggable div using css, rather than the image, you'd get more consistent result.

ie. dont use [alt="scooter-helmet"] use .draggable:nth-child(2) to pick the second div. change n for each one based on the order in which you write them out in the div. then set their position using top and right (as this is what the draggable library will use.

5 hours ago, iamdavehart said:

I would add that it's probably not quite right to set the position of the image inside the draggable div using CSS. this is because it then positions the image outside of the draggable div. It does work in this case, but it does some strange positioning because the draggable library is changing the position of the containing div NOT the contained image. 

this effect is actually what's causing the odd behaviour in your "non-working" example:

• jquery contains the draggable div to the "#about" section
• buy you have moved the image say 300px to the right of the draggable div
• so when you're moving the image around, it's the div that's contained (which is now 300px out). the div is stopping at left:0 which is where they all begin until you move the images with css

If you reposition the draggable div using css, rather than the image, you'd get more consistent result.

ie. dont use [alt="scooter-helmet"] use .draggable:nth-child(2) to pick the second div. change n for each one based on the order in which you write them out in the div. then set their position using top and right (as this is what the draggable library will use.

Dave—Thanks for your generosity of time + knowledge to help me make sense of this.

It was all a bit of a reach for my coding knowledge, but I learned quite a bit from your explanation! Thanks so much. I'll take a pass later, removing the containment and change how I'm targeting each image.