Drag an full-screen image within the screen

(Lydia Lee) #1

Hi there,
Recently I’m working on a project which need an “image drag” effect.
The effect is: there is an full-screen image on the page, I want it can move from right to left and left to right along with dragging. But not from the top to the bottom（that means the image can’t move vertically）.
I read the article from the forums：[Drag element limited by ‘container’ without additional js-library][1]

Thanks for the contributory very much. I’ve tried it, it effective for the small element. But when I change the small element for a full-screen image, it doesn’t work. Here’s the source file:drag(test)-hype.zip (264.3 KB)
Anyone have some ideas? I know there is something wrong with my source file.
Thanks very much!!
[1]: Drag element limited by 'container' without additional js-library

#2

Hi Lydia

draggable.zip (263.9 KB)

I have adapted your document to use the jQuery UI draggable option. It makes it a lot simpler :wink:

I think this is what you wanted?

Hope it helps!

D

(Greg) #3

If you would rather not use jQuery, you can set up a new timeline, and then “On Drag” --> “Control Timeline” in the Action Inspector…

drag(test)-1.hype.zip (249.9 KB)

(Lydia Lee) #4

Thank you very much! It’s the effect what I want !!
But for more, if I want the draggable image :

  1. Still the full-screen image, drag the image to the left, it will stop when the right border of the image appears，and vice versa.
  2. Not the full-screnn image, but a wide image which I want limit it in a “container”(maybe in a Rectangle). The part of the image which exceed the “container”'s border will be hiden. Along with dragging, it will appear from left to right or right to left.
    Here’s the source file, draggable-2.zip (455.3 KB) I marked the keypoint on it. I’m ashamed of my poor JS/JQ knowledge…If you have some idea using JS/JQ to achieve it, thank you very much!!!
(Lydia Lee) #5

Thank you very much! I tride this way, but maybe the timeline controling can’t achieve it completely. Thank you all the same, I will learn more about the “drag”~~ :smiley:

#6

Just put a containment: "document" option after axis: x

http://api.jqueryui.com/draggable/#option-containment

D

#7

draggable.zip (255.6 KB)

See if this helps you :wink:

D