Code for Hold and Drag Images on Desktop and Mobile for Squarespace 7.1

Hi!

We are trying to replicate the hold and drag feature of the images on this website: https://biancasciuto.com/

website is: mocaf.net
password is: mocaf2023

Does anyone know a custom code to do this? 

We are trying to make it work with the code below but the code below rearranges the placement of the images.

<img class="draggable ui-widget-content" src="https://static1.squarespace.com/static/6233048786e7596cc972ed24/t/645a2e3dddd886249a178448/1683631683029/Screen+Shot+2023-05-09+at+4.09.38+PM.png" alt=""/> <img class="draggable ui-widget-content" src="https://static1.squarespace.com/static/6233048786e7596cc972ed24/t/645a29d206ae7f233d678146/1683630551843/Screen+Shot+2023-05-09+at+4.09.28+PM.png" alt=""/> <img class="draggable ui-widget-content" src="https://static1.squarespace.com/static/6233048786e7596cc972ed24/t/645a29ce9388ce66f301d993/1683630542482/te%CC%81le%CC%81chargement-3-875x675.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>

You can try this similar plugin https://www.squarestylist.com/shop/movable-blocks

hi, was this hard to do?, I am looking to do something similar on a new page

1 hour ago, Mica77 said:

was this hard to do?

Is it hard to create drag and drop code?

It depends on your JavaScript skill level and how much effort you want to put into it. If you DIY you are into a moderately complex bit of code. If you use a JavaScript library of some kind things can be a bit easier. If you use a Squarespace specific solution (plug-in/code) then it might be as easy as telling the code which elements you want to move around.

@ArtMocaf I see on your site that you figured this out! How did you do it??