Continuous dragging with HammerJS (dragging even after releasing)

Is it possible to implement dragging after release using HammerJS (and if so, how)? I am using it in conjunction with AngularJS, but that detail should not be relevant.

I'm inquiring about this because I aim to achieve a seamless scrolling experience (similar to the one seen on native iOS where scrolling continues after lifting your finger).

I believe there is a way to accomplish this as there is a velocity property available in the gesture event.

In my implementation, there is an overlay div positioned above the content that detects touches. From there, I manually manage the scrolling of the underlying divs based on these touch events.

javascriptangularjshammer.js

Answer №1

To create your own velocity callback on panend, follow the example code below. This should work if you are using Hammer v2.

    var friction = -0.05;

    function panend(evt) {
        applyVelocity(evt.velocityY,evt.direction);
    }

    function applyVelocity(v,dir) {
        var dist = v*16;
        if(dir===Hammer.DIRECTION_DOWN) {
            dist*=-1;
        }

        // Place your code here to implement the Y transform for moving elements

        if(v>0) {
            v+=friction;
            window.requestAnimationFrame(function(){
                applyVelocity(v,dir);
            });
        }
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is my DELETE request in AngularJS being sent as an Options request?

Everything was running smoothly until I took a break from this project. Recently, when I try to send a delete request to my server, I encounter the error message: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ...

angularjsyiicorshttp-options-method

When setting up a new nodejs/express project, I encountered an issue where the fresh installation would fail

After setting up node and express on my new development server, I created a test application by running the command below: dev-server15:/var/www# express mytest create : mytest create : mytest/package.json create : mytest/app.js ... The npm ...

javascriptnode.jsexpress

Is it possible for the UUIDs generated by the uuid package to be identical?

I am in need of creating unique UIDs for objects that will be stored in a database. To achieve this, I am utilizing the UUID npm package for generating unique identifiers. I have concerns regarding the possibility of duplicate IDs being generated by this p ...

javascriptnode.jsexpressnpm

Is it possible to implement PortalVue in multiple Vue.js single file components?

While working on Vue.js (single file components), I have discovered three methods of passing data around: local state/props, store, and utilizing PortalVue. Through my experiments with PortalVue, I successfully implemented both portal and portal-target wit ...

javascriptvue.jsvue-component

Develop universal style classifications for JSS within material-ui

Currently, I am utilizing the JSS implementation of material-ui to style my classes. As I have separated my components, I find myself dealing with a significant amount of duplicated code in relation to the components' styles. For instance, I have mu ...

javascriptreactjsmaterial-designmaterial-uijss

NodeJS refuses to import a file that is not compatible with its structure

My website has two important files: firebase.js gridsome-server.js The firebase.js file contains JavaScript code related to Firebase integration: import firebase from 'firebase/app' import 'firebase/firestore' const config = { ap ...

javascriptnode.jsvue.jswebpackcommonjs

AngularJS: Utilizing Karma and Jasmine for testing with a live backend server

Planning to use Karma and Jasmine for testing an AngularJS client with an actual backend. While Karma uses its own express, I require access to a real Node.js backend with a database and additional functionalities. My idea is to incorporate an intercepto ...

node.jsangularjsjasminekarma-runner

What is the process for animating classes instead of ids in CSS?

My webpage currently features a setup similar to this. function wiggle(){ var parent = document.getElementById("wiggle"); var string = parent.innerHTML; parent.innerHTML = ""; string.split(""); var i = 0, length = string.length; for (i; i ...

javascripthtmljquerycsscss-animations

Determine the selected radio button

----EDIT---- I am developing a jQuery mobile application and I need to determine which radio button is selected. This is the JavaScript code I'm using: function filter(){ if(document.getElementById('segment1').checked) { aler ...

javascripthtmlcssjquery-mobile

Error in AngularJS: 'Unknown provider' occurs after minification is enabled (due to ng-strict-di activation)

Initially, I concatenate all my JavaScript files using the grunt-contrib-concat grunt task. This process worked smoothly without any issues (without minification). Now, I am attempting to switch to Google's Closure Compiler in order to minify the cod ...

angularjsminifygoogle-closure-compilerdependency-resolver

TypeScript is unable to recognize files with the extension *.vue

Can someone assist me with an issue I'm facing in Vue where it's not detecting my Single File Components? Error message: ERROR in ./src/App.vue (./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/Ap ...

javascripttypescriptwebpackvue.js

The proper usage of middleware in vue-router

I've set up routes in Vue and added some middleware conditions before each route, but it's not functioning as expected. Below is the content of my router/index.js file: const token = computed(() => useAuthStore().token); // Main Router cons ...

javascriptvue.jsvuejs3vue-componentvue-router

Converting JQuery Object (Ajax-response) to an Array Containing Keys and Values

When I make an $.ajax request, the response I receive looks like this: https://i.sstatic.net/UfnfQ.jpg (please don't worry about the Russian symbols, they are just strings of text:)) I am aware that when PHP sends the request, it is in a simple arr ...

javascriptjqueryarraysobject

How to retrieve a value only if it is truthy in JavaScript or TypeScript - Understanding the operator

In React components, a common scenario arises with code like this: <Carousel interval={modalOpen ? null : 8000}> It would be great if I could simplify it to something along these lines (although it's not valid): <Carousel interval={modalOpen ...

javascripttypescript

Exploring the power of protractor through the implementation of loops

Within my Protractor loop, the loop index (i) is not behaving as expected. Issues: Error: Index out of bound. Attempting to access element at index:'x', but there are only 'x' elements or The index remains static and always equ ...

angularjsselenium-webdriverpromiseprotractor

Searching for an AngularJS and Bootstrap Dual Listbox Solution

I need a component like this to integrate into my project: https://i.sstatic.net/W3PSB.png I am hoping to add it using npm. However, I have tried some of the examples available but faced issues (encountered exceptions or only found bower instead of npm) ...

javascriptangularjstwitter-bootstrapnpm

What is the best method for utilizing a single L.Shapefile/zip file Object and modifying the onEachFeature function for each layer?

I am currently facing an issue where I have multiple tileLayers each containing a shape file. These tile layers represent different datasets based on variables and adjust colors accordingly. I have been able to achieve this by creating three separate Obje ...

javascriptleafletshapefile

Utilize the three.js library within a Vue component by importing it and incorporating its

Can someone please help me understand the proper way to import and utilize the three.js library in a vue component? Despite my extensive research, it seems that most individuals use the following code line to import three.js into a vue component. However, ...

javascriptimportvue.jsthree.jsshared-libraries

Is it possible to continuously update a Google line chart by programmatically adding rows at specific intervals using an AJAX call

Is there a way to dynamically add rows to the Google line chart each time data is retrieved via an AJAX call at set intervals? This is the existing code: google.charts.load('current', {'packages':['line']}); google.charts. ...

javascriptjqueryajaxgoogle-visualization

Issues involving the handleChange function in React can be a frustrating and common hurdle

I am encountering an issue with the handleChange function in my React project. Upon loading data from JSONPlaceholder and clicking on the 'Edit' button, a form is displayed with the selected user's information. However, when trying to edit ...

javascriptreactjs