Allow user to pan image by dragging within cropped frame?

Design help Animations & Interactions
1

Hi all,

How would I go about creating a simple drag interaction? Imagine if I have a large image that is cropped by a smaller div, and I want the user to be able to drag around in the box to see more of the image.

I’ve tried looking it up, but everyone is trying to create really complex drag interactions with sliders and I can’t figure out how to just do the basic drag.

Please help!

2

Hey @pcanjjaxdcd
Just to conclude, are you trying to achieve something like this?
https://riela-project.webflow.io/test-page

3

Whoa, that was quick, thank you.
But no, I meant something more like Google Maps, where the frame stays in the same place, but the image underneath moves.

4

Can you check this URL again to confirm?
https://riela-project.webflow.io/test-page
@pcanjjaxdcd

5

Amazing, yes!
How can I implement this?
(For context, I want to implement a horizontal pan, but not vertical. Not sure if that affects the code)

6

Here is the code that goes into 

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
  $( function() {
    
    $( ".big-image" ).draggable();
    
     } );

</script>

And here is a loom video with a bit of an explanation.

7

Thank you so much!!!

8

For anyone who needs to reference this thread in the future, I figured out how to constrain the dragging by x-axis:

$( “.img-drag” ).draggable({ axis: “x” });

9

Hi - thanks for this. Sadly it doesn’t work on mobile. Any ideas?