Jump to content

Draggable images

Recommended Posts

  • 4 months later...
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=""/>
  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;
<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>
    $( function() {
    $( ".draggable" ).draggable({ stack: ".draggable" });
  } );


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.