Jump to content

Draggable image blocks for mobile with jquery touch punch

Go to solution Solved by loopmatch,

Recommended Posts

Posted (edited)

Hi sorry in advance I have zero experience with coding except for what I have learned in the last day.

I added a custom code block to my page to make image blocks draggable. I.e its a stack of polaroids and you can drag each one off the stack and put it wherever you want on the page. 

I found a code to do this in a thread that used jquery draggable widget so I added this code to my page and it works for desktop but not for mobile because the clickable events are not the same as touch events. I found another thing called jquery touch punch which is supposed to modify the mouse behavior and translate the click events to touch for mobile.

I inserted the touch punch script after the first jquery ui script and before the first drag function but it still doesn't work for mobile.

 

</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 src="jquery.ui.touch-punch.min.js"></script>
<script>
  
    $( function() {
    $( ".draggable" ).draggable({ stack: ".draggable" });
  } );
</script>

 

 

Any help would be greatly appreciated. Thank you.

The site is loopmatch.org and the polaroids are on the about page 

 

Edited by loopmatch
Link to comment
  • Solution

Hi thanks to anyone who began researching. I was able to find a solution with chatgpt.

I added these lines and now it works

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://rawgit.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>

Link to comment

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.