ArtMocaf Posted May 29, 2023 Share Posted May 29, 2023 (edited) 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> Edited May 30, 2023 by ArtMocaf Link to comment
tuanphan Posted June 1, 2023 Share Posted June 1, 2023 You can try this similar plugin https://www.squarestylist.com/shop/movable-blocks Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Mica77 Posted August 4, 2023 Share Posted August 4, 2023 hi, was this hard to do?, I am looking to do something similar on a new page Link to comment
creedon Posted August 4, 2023 Share Posted August 4, 2023 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. tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
SarahK270 Posted January 10 Share Posted January 10 @ArtMocaf I see on your site that you figured this out! How did you do it?? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment