Draggable images

Hello,

Does anyone know whether it's possible to have draggable images on Squarespace 7.1 or 7.0 Brine like on this website?

https://biancasciuto.com/

Thanks,
Rhonda

You try find a free code on Codepen, then share me link, we will try converting it to Squarespace.

hello! i have been trying to figure out the same thing..

this is the code i have been trying to use: https://codepen.io/JensSchnitzler/pen/jppVmp

On 2/17/2023 at 4:28 AM, destructedelegance said:

hello! i have been trying to figure out the same thing..

this is the code i have been trying to use: https://codepen.io/JensSchnitzler/pen/jppVmp

Try adding a Code Block with this code

<img class="draggable ui-widget-content" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Jan_Vermeer_-_The_Art_of_Painting_-_Google_Art_Project.jpg/1280px-Jan_Vermeer_-_The_Art_of_Painting_-_Google_Art_Project.jpg" alt=""/>
<img class="draggable ui-widget-content" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Johannes_Vermeer_-_Het_melkmeisje_-_Google_Art_Project.jpg/1070px-Johannes_Vermeer_-_Het_melkmeisje_-_Google_Art_Project.jpg" alt=""/>
<img class="draggable ui-widget-content" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Vermeer-view-of-delft.jpg/1444px-Vermeer-view-of-delft.jpg" alt=""/>
<style>
  img {
  height: 150px; 
  overflow: hidden;
  cursor: move;
  display: block;
  position: fixed;
}
img:nth-child(1) {
  left: 1vw;
  top: 1vw;
}
img:nth-child(2) {
  left: 2vw;
  top: 2vw;
}
img:nth-child(3) {
  left: 3vw;
  top: 3vw;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
    $( function() {
    $( ".draggable" ).draggable({ stack: ".draggable" });
  } );
</script>

Thanks @tuanphan

It works :-)

Is there an updated code. It didn't work for me.

how do i have to paste the code?

On 9/27/2023 at 4:08 PM, alozanx said:

how do i have to paste the code?

 

Website > Website Tools (under Not Linked) > Code Injection > Footer

@tuanphan - is it possible for this to work on mobile too?

Website: aquarius-brand.squarespace.com
PW: aqua

On 1/20/2024 at 3:21 AM, estormstudio said:

@tuanphan - is it possible for this to work on mobile too?

 

Website: aquarius-brand.squarespace.com
PW: aqua

I don't know this..if you can find an example on Codepen, I can change it to Code on SS

On 1/19/2024 at 3:21 PM, estormstudio said:

@tuanphan - is it possible for this to work on mobile too?

 

Website: aquarius-brand.squarespace.com
PW: aqua

Hi there- what was the specific code you used for the desktop for the stones? 

On 2/15/2024 at 2:22 AM, katamb said:

Hi there- what was the specific code you used for the desktop for the stones? 

I think he used this code