swipe.top distance?

[Yonier]

hi im using v-touch:swipe.top,

so i get (direction, event), i saw the whole event param, but i didnt see a distance prop, i want to know the distance because i want to make an element draggeable,

thank you!

[jerrybendy]

Hi. You can use start, moving and end event to realize your demand. Recording the position where the touch event starts and setting a flag to indicate the touch is starting, then you can calculate the distance and direction when touch moving. Don't forget clean your flag when touch end.

[bradley-varol]

If you want to know the distance while the user is swiping (for example, seeking audio), do this:

data() {
    return {
        touchY: null,
    };
},
methods: {
        touchStartHandler(e) {
            // store the Y axis value (touch start point)
            this.touchY = e.touches[0].clientY;
        },
        touchEndHandler() {
            // reset Y axis value, ready for next touch
            this.touchY = null;
        },
        touchingMovingHandler(e) {
            const distance = e.touches[0].clientY - this.touchY;
            // do something with distance
            // set touchY to the current touch value, ready for the next moving event
            this.touchY = e.touches[0].clientY;
        },
}

If you just want to know the distance after the user swiped, do this:

data() {
    return {
        touchStartY: null,
    };
},
methods: {
        touchStartHandler(e) {
            // store the Y axis value (touch start point)
            this.touchStartY = e.touches[0].clientY;
        },
        touchEndHandler(e) {
            const totalDistance = this.touchStartY - e.touches[0].clientY;
            // do something with the total swiped distance
            // reset Y axis value, ready for next touch
            this.touchStartY = null;
        },
}