taylorroy Posted September 16, 2021 Share Posted September 16, 2021 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. Link to comment
iamdavehart Posted September 16, 2021 Share Posted September 16, 2021 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 Dave Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
iamdavehart Posted September 16, 2021 Share Posted September 16, 2021 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 Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
taylorroy Posted September 16, 2021 Author Share Posted September 16, 2021 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. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.