Ik heb een applicatie gemaakt in AngularJS die navigatie met pijltjestoetsen heeft om van weergave te wisselen.
Ik wil deze navigatie implementeren met vegen voor aanraakapparaten. Ik heb de jGestures-bibliotheek geprobeerd, maar het gaat niet goed met swipe.
Ik heb het advies gekregen om jquery mobileNIET te gebruiken.
Is er een andere manier om veegbewegingen te implementeren?
BEWERKEN:
Het detecteert swipe niet netjes. Ik heb het op meerdere apparaten getest, waaronder iPad en er zijn meerdere veegbewegingen nodig om een actie uit te voeren (routering in mijn geval).
Antwoord 1, autoriteit 100%
Ik heb deze functie gemaakt voor mijn behoeften.
Gebruik het gerust. Werkt prima op mobiele apparaten.
function detectswipe(el,func) {
swipe_det = new Object();
swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
var min_x = 30; //min x swipe for horizontal swipe
var max_x = 30; //max x difference for vertical swipe
var min_y = 50; //min y swipe for vertical swipe
var max_y = 60; //max y difference for horizontal swipe
var direc = "";
ele = document.getElementById(el);
ele.addEventListener('touchstart',function(e){
var t = e.touches[0];
swipe_det.sX = t.screenX;
swipe_det.sY = t.screenY;
},false);
ele.addEventListener('touchmove',function(e){
e.preventDefault();
var t = e.touches[0];
swipe_det.eX = t.screenX;
swipe_det.eY = t.screenY;
},false);
ele.addEventListener('touchend',function(e){
//horizontal detection
if ((((swipe_det.eX - min_x > swipe_det.sX) || (swipe_det.eX + min_x < swipe_det.sX)) && ((swipe_det.eY < swipe_det.sY + max_y) && (swipe_det.sY > swipe_det.eY - max_y) && (swipe_det.eX > 0)))) {
if(swipe_det.eX > swipe_det.sX) direc = "r";
else direc = "l";
}
//vertical detection
else if ((((swipe_det.eY - min_y > swipe_det.sY) || (swipe_det.eY + min_y < swipe_det.sY)) && ((swipe_det.eX < swipe_det.sX + max_x) && (swipe_det.sX > swipe_det.eX - max_x) && (swipe_det.eY > 0)))) {
if(swipe_det.eY > swipe_det.sY) direc = "d";
else direc = "u";
}
if (direc != "") {
if(typeof func == 'function') func(el,direc);
}
direc = "";
swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
},false);
}
function myfunction(el,d) {
alert("you swiped on element with id '"+el+"' to "+d+" direction");
}
Om de functie te gebruiken, gebruik het gewoon als
detectswipe('an_element_id',myfunction);
detectswipe('an_other_element_id',my_other_function);
Als een veegbeweging wordt gedetecteerd, wordt de functie “mijnfunctie” aangeroepen met de parameter element-id en “l,r,u,d” (links,rechts,boven,onder).
Voorbeeld: http://jsfiddle.net/rvuayqeo/1/
Ik (UlysseBN) heb een nieuwe versie van dit scriptgemaakt op basis van deze die moderner JavaScript gebruikt , het lijkt erop dat het zich in sommige gevallen beter gedraagt. Als je denkt dat het eerder een bewerking van dit antwoord zou moeten zijn, laat het me dan weten, als je de oorspronkelijke auteur bent en je uiteindelijk aan het bewerken bent, zal ik mijn antwoord verwijderen.
Antwoord 2, autoriteit 43%
Heb je Hammerjs geprobeerd? Het ondersteunt veegbewegingen door gebruik te maken van de snelheid van de aanraking.
http://eightmedia.github.com/hammer.js/
Antwoord 3, autoriteit 12%
Er is ook een AngularJS-module genaamd angular-gestures die is gebaseerd op hammer.js:
https://github.com/wzr1337/angular-gestures
Antwoord 4, autoriteit 9%
Schaamteloze plug Ik weet het, maar je zou een jQuery-plug-in kunnen overwegen die ik heb geschreven:
https://github.com/benmajor/jQuery-Mobile-Events
Het vereist geen jQuery mobile, alleen jQuery.
5, Autoriteit 3%
Hamertijd!
Ik heb Hammer JS gebruikt en het werkt met gebaar. Lees de details van hier: https://hammerj.github.io/
goed ding dat het veel meer licht gewicht en snel dan jQuery mobiel is. Je kunt het ook op hun website testen.
6, Autoriteit 3%
Ik vind je oplossing leuk en implementeerde het op mijn site – maar met enkele kleine verbeteringen. Wilde alleen mijn code delen:
function detectSwipe(id, f) {
var detect = {
startX: 0,
startY: 0,
endX: 0,
endY: 0,
minX: 30, // min X swipe for horizontal swipe
maxX: 30, // max X difference for vertical swipe
minY: 50, // min Y swipe for vertial swipe
maxY: 60 // max Y difference for horizontal swipe
},
direction = null,
element = document.getElementById(id);
element.addEventListener('touchstart', function (event) {
var touch = event.touches[0];
detect.startX = touch.screenX;
detect.startY = touch.screenY;
});
element.addEventListener('touchmove', function (event) {
event.preventDefault();
var touch = event.touches[0];
detect.endX = touch.screenX;
detect.endY = touch.screenY;
});
element.addEventListener('touchend', function (event) {
if (
// Horizontal move.
(Math.abs(detect.endX - detect.startX) > detect.minX)
&& (Math.abs(detect.endY - detect.startY) < detect.maxY)
) {
direction = (detect.endX > detect.startX) ? 'right' : 'left';
} else if (
// Vertical move.
(Math.abs(detect.endY - detect.startY) > detect.minY)
&& (Math.abs(detect.endX - detect.startX) < detect.maxX)
) {
direction = (detect.endY > detect.startY) ? 'down' : 'up';
}
if ((direction !== null) && (typeof f === 'function')) {
f(element, direction);
}
});
}
Gebruik het als:
detectSwipe('an_element_id', myfunction);
Of
detectSwipe('another_element_id', my_other_function);
Als een veegbeweging wordt gedetecteerd, wordt de functie myfunctionaangeroepen met parameter element-id en 'left', 'right', 'up'of 'down'.
Antwoord 7
Ik heb naar verschillende oplossingen gekeken, maar ze faalden allemaal, waarbij scrollen en tekst selecteren de grootste verwarring was. In plaats van naar rechts te scrollen, sloot ik vakken en dergelijke.
Ik ben net klaar met mijn implementatie die alles voor mij doet.
https://github.com/webdevelopers-eu/jquery-dna-gestures
Het is MIT, dus doe wat je wilt – en ja, het is heel eenvoudig – 800 bytes geminimaliseerd. Je kunt het bekijken op mijn (in ontwikkeling zijnde) site https://cyrex.tech– swiperight op touch-devices zou pop-upvensters moeten sluiten.