All geek questions in one place

Multi-finger event

I have two functions $('body').swipe(); below, which obviously cannot work together, because the second cancels out what I want to do (two functions are executed on the same DOM element, etc.) ...

The first function works as it should. Swipe left and right with two fingers. My problem is that this disables the normal one-finger page scroll that could be done on the iPad.

Question: I want to run swipe left and right with two fingers (it works), however I want to enable allowPageScroll: 'vertical' on one finger of my finger. How can i do this? I can’t determine how to start the parameters (i.e. AllowPageScroll: "vertical", threshold: 200, fingers: 2) only in the swipeLeft: and swipeRight: functions.

The plug-in used can be found here: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

 $('body').swipe({ swipeLeft: function (event, direction, distance, duration, fingerCount) { // set cookie $.cookie('sb-swipe', 'inactive', { expires: 1 }); //This only fires when the user swipes left openDashboard(); // hide swipe instructions, if applicable $('div.instructions-overlay').fadeOut('slow'); }, swipeRight: function (event, direction, distance, duration, fingerCount) { //This only fires when the user swipes right closeDashboard(); $('#employee-dash-btn').hide(); }, allowPageScroll: 'vertical', threshold: 200, fingers: 2 }); $('body').swipe({ allowPageScroll: 'vertical', fingers: 1 });
+6
source share
1 answer

I think something works for me, but not with the TouchSwipe plugin that you connect (after many tests with it, I just give up and try one more thing).

I use Touchy (1.98 kb), which can be found here , which provides support for several fingers up to 5. Another part for detecting left or right scrolling is a small guide, saving the X coordinates of the two fingers at the beginning of the touch event and at the end in variables.

We just need to compare if the first two coordinates are more or less. The code below is to swipe the screen to the right:

 if (finger1Start < finger1End && finger2Start < finger2End)

I decided to consider a real swipe when two fingers move in the same direction, but it is up to you if you want to change.

Last, if you really want a threshold , you need to save the start and end time of the event with new Date().getTime(); subtract them and make sure they are > 200 ms. I can update the code if you want.

Here is Fiddle , I tested it on iPhone 4s (iOS 7.0.3).

 var finger1Start, finger1End, finger2Start, finger2End, threshold = 200; $('body').touchy({ two: function (hand, finger1, finger2) { hand.on('start', function (points) { finger1Start = points[0].x; finger2Start = points[1].x; }); hand.on('end', function (points) { finger1End = points[0].x; finger2End = points[1].x; testSwipe(); }); } }); function testSwipe () { if (finger1Start < finger1End && finger2Start < finger2End) // The two X coordinates of the fingers have swipe to the right if (finger1End - finger1Start >= threshold && finger2End - finger2Start >= threshold) { $('#message').text("You have swipe to the right"); } else { $('#message').text("Not enought swipe"); } } else if (finger1Start > finger1End && finger2Start > finger2End) { // The two X coordinates of the fingers have swipe to the left if (finger1Start - finger1End >= threshold && finger2Start - finger2End >= threshold) { $('#message').text("You have swipe to the left"); } else { $('#message').text("Not enought swipe"); } } } 
 #message { color:green; } #text { width: 100px } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/jairajs89/Touchy.js/master/touchy.js"></script> <body> <div id="message"></div> <div id="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut placerat lacus. Etiam vel aliquam quam. Aenean et hendrerit elit, quis porttitor erat. Cras lacinia ornare sem ut laoreet. Sed consectetur felis at hendrerit posuere. Nam porttitor magna sed quam malesuada, eu adipiscing sapien dapibus. Praesent fermentum sem sit amet diam posuere, non vestibulum velit porttitor. Etiam sodales tellus nec mi venenatis dignissim. Aliquam metus lectus, feugiat ac tellus hendrerit, auctor sollicitudin metus. Morbi bibendum lectus erat, a iaculis tellus egestas nec. Cras adipiscing augue ac lectus placerat tempor. Fusce iaculis mollis lectus, nec mattis mi rhoncus id. Nullam scelerisque feugiat mollis. Mauris nec augue erat. Aliquam fermentum nibh ligula, vel tempus dui feugiat vel. Aliquam a consequat nisl, eu vulputate velit. Mauris pulvinar accumsan leo nec venenatis. Nullam at orci nec lorem facilisis tempor ac vitae purus. Fusce elit nulla, commodo sit amet nisi nec, euismod egestas sem. Nulla dui libero, accumsan et dignissim vitae, commodo vitae leo. Suspendisse potenti. Pellentesque vitae lectus sit amet lacus pulvinar imperdiet in id nulla. Nunc lacinia felis eu lobortis pretium. </div> </body>
+4
source

Source: https://habr.com/ru/post/958098/

More articles:


All Articles