Vertical Drag

4 minutes
Share the link to this page
Vertical drag onVerticalDragStart A pointer has contacted the screen and might begin to move vertically. onVerticalDragUpdate A pointer that is in contact with the screen and moving vertically has moved in the vertical direction. onVerticalDragEnd A pointer that was previously in contact with the screen and moving vertically is no longer in contact with the screen and was moving at a specific velocity when it stopped contacting the screen.


Hello, in this video, I am going to show you how to detect the vertical drag gesture on any sort of widget. So we've got this image here. And what we want to do is detect when we drag up and down. So this is really cool. Maybe we have some sort of sad image. And if we swipe up, you'll go to the next image, you could do the left and right as well.

In the next video, I'll show you horizontal drag. So if you want to do that, but what you want to do is totally up to you, I'm going to put a print statement in there, but the actual functionality is obviously dependent on your specific scenario. So we have this container with a child who had this image and we're going to enclose this inside with gesture and say, child gesture and clip this and put it in here. Okay, so this is Jessica detect, gesture. And now we can actually try and detect the gesture that we want. What we want is on vertical, there's a few different ones.

So you got on vertical drag, start, you've got and down, update and cancel. may want you probably want to deal with is start this when you first basically click on it. This is updated based, you know when you know scrolling up or down, and you're telling us at the speed, so that's really useful. So if you're scrolling something, he allows you to determine how fast you should scrolling, how many items should be scrolled, for example. And you know, once you lifted the finger off, it cancel essentially, when something else interrupts your phone, like forget a phone call, you'll cancel what's happening. So if we just do start for now, and he asks me to put drag, start detail details like so and we can just do a print We can start.

And then we can look at the detail as well for you to see what's being printed out. If we save that, go back, they find it, you know, click it says start. But if I, you know, just drag it around and do anything, it's only now obviously stay in the position of the clip. Now on the screen itself, obviously not anywhere else only on the image collaborates attached to if we want to detect the scroll itself, the vertical drag, we just do on a 30 foot drive update. And we need to do drag not start I mean, you can get drag update detail and we can call it params one and in here, basically do the same thing. So we'll copy and paste.

The only difference is this date instead. So if we save that now, so if I click on it, I didn't see say start now I'm gonna move the mouse So as you can see, it's printing so far. So if I now move up, we get a minus by liquid. Remember, like on a phone, if you scroll your finger up is the equivalent of, you know, going down and lift the item to this, you know, reverse scroll, and vice versa. So, as you can see, I'm moving it, I'm just moving in quite slowly. And we're getting similar values, even minds or positive but one for doing fast.

You probably can see that we've got some values that are like two, three, maybe even higher their mood like 20. So depending on the actual scroll itself, will determine you know, the actual what's called the, you know, the value in the details. And we can get some of the properties from here. And as an extra task we're on when you to do is implement all the other vertical gestures. So we got, you know, the Council on we got and and Common, what the other one was cancel and, and then implement them, get them working and also try and get the individual pieces of information from here for you know this and that is it. That's all there is to vertical drag detection.

If you have any questions, feel free to drop me a message. And as usual, I look forward to seeing you in the next video.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.