Comment balayez du haut vers le bas de JQuery mobile

Je suis en train de faire événement, balayez vers le haut et vers le bas au lieu de droite et de gauche

j'ai ce rouleau que l'image montre:
Comment balayez du haut vers le bas de JQuery mobile

Je peux gérer l'événement à l'aide de la flèche de l'icône (onClick()) mais je veux ajouter balayez vers le haut vers le bas de l'événement,
lors de l'ajout de balayage d'événement, il fonctionne sur la gauche la droite
Je le veux jusqu'en bas de l'image s'affiche
toute aide?

InformationsquelleAutor Muath | 2013-06-16
  1. 51

    jQuery Mobile nativement nous offre la possibilité de capturer le swipeleft et swiperight. Il n'est toutefois pas nous offrir swipeup et swipedown hors de la boîte. L'adaptation de ce que le jQuery équipe a fait pour swipeleft et swiperight, nous sommes en mesure de créer et de capturer les événements de la même manière. Voir le code suivant pour mettre en œuvre swipeup et swipedown:

    (function() {
var supportTouch = $.support.touch,
scrollEvent = "touchmove scroll",
touchStartEvent = supportTouch ? "touchstart" : "mousedown",
touchStopEvent = supportTouch ? "touchend" : "mouseup",
touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
$.event.special.swipeupdown = {
setup: function() {
var thisObject = this;
var $this = $(thisObject);
$this.bind(touchStartEvent, function(event) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] :
event,
start = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ],
origin: $(event.target)
},
stop;
function moveHandler(event) {
if (!start) {
return;
}
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] :
event;
stop = {
time: (new Date).getTime(),
coords: [ data.pageX, data.pageY ]
};
//prevent scrolling
if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
event.preventDefault();
}
}
$this
.bind(touchMoveEvent, moveHandler)
.one(touchStopEvent, function(event) {
$this.unbind(touchMoveEvent, moveHandler);
if (start && stop) {
if (stop.time - start.time < 1000 &&
Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
Math.abs(start.coords[0] - stop.coords[0]) < 75) {
start.origin
.trigger("swipeupdown")
.trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
}
}
start = stop = undefined;
});
});
}
};
$.each({
swipedown: "swipeupdown",
swipeup: "swipeupdown"
}, function(event, sourceEvent){
$.event.special[event] = {
setup: function(){
$(this).bind(sourceEvent, $.noop);
}
};
});
})();

    et voici la réponse de Blackdynamo

    • cette exactement ce que je veux et il a travaillé pour moi.
    • Comment puis-je configurer un écouteur pour swipeupdown événement et d'effectuer différentes tâches pour swipeup et swipedown événement?
    • vous pouvez utiliser $('mySelector').on('swipeup', function() {}); et $('mySelector').on('swipedown', function() {});
    • J'ai utilisé ce plugin jQuery et ses la plus facile. github.com/mattbryson/TouchSwipe-Jquery-Plugin
    • Cette réponse ne fonctionne pas, si le départ et la cible de l'balayage n'est pas la même div: Voir Réponse ci-dessous pour le fixer! violon: jsfiddle.net/Q3d9H/124
    • Je voulais juste ajouter. La réponse fonctionne toujours parfait.J'ai ajouté ce script à la tête, et utilisés "$('.myClassSelector').sur('swipedown', function() {});". A travaillé sur le premier essai. Merci.

    InformationsquelleAutor Taymoor Q.
  2. 2

    J'ai eu des Problèmes avec la accepté de répondre ici, parce que le balayage n'est pas détecté lors d'origine et de destination de l'balayage n'étaient pas les mêmes.

    Ici peut-être plus facile de répondre, où j'ai directement remplacer le jquery handleSwipe événement (basé sur jquery.mobile-1.4.5) et l'ajouter avec une verticale de balayage, appelé en haut et en bas:

    (function( $, window, undefined ) {
//custom handleSwipe with swiperight, swipeleft, swipeup, swipedown
$.event.special.swipe.handleSwipe = function( start, stop, thisObject, origTarget ) {
if ( stop.time - start.time < $.event.special.swipe.durationThreshold ) {
var horSwipe = Math.abs( start.coords[0] - stop.coords[0] ) > $.event.special.swipe.horizontalDistanceThreshold;
var verSwipe = Math.abs( start.coords[1] - stop.coords[1] ) > $.event.special.swipe.verticalDistanceThreshold;
if( horSwipe != verSwipe ) {
var direction;
if(horSwipe)
direction = start.coords[0] > stop.coords[0] ? "swipeleft" : "swiperight";
else
direction = start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown";
$.event.trigger($.Event( "swipe", { target: origTarget, swipestart: start, swipestop: stop }), undefined, thisObject);
$.event.trigger($.Event( direction, { target: origTarget, swipestart: start, swipestop: stop }), undefined, thisObject);
return true;
}
return false;
}
return false;
}
//do binding
$.each({
swipeup: "swipe.up",
swipedown: "swipe.down"
}, function( event, sourceEvent ) {
$.event.special[ event ] = {
setup: function() {
$( this ).bind( sourceEvent, $.noop );
},
teardown: function() {
$( this ).unbind( sourceEvent );
}
};
}); 
})( jQuery, this );
    • le "accepté de répondre travaillé parfaite" et 50 personnes ont voté dans cette communauté
    • stackoverflow.com/questions/19808917/...
    • voir cet exemple de travail sur elle
    • Essayez de glisser à partir du bas de la div au dessus de la div, ne fonctionne pas: jsfiddle.net/Q3d9H/124 Ma solution peut gérer (violon est compliqué, parce que j'étends le script jquery)
    • Et avant de vous le dire, c'est le comportement voulu, non, il ne l'est pas. Jquery swipeleft et swiperight gère également le début de la cible et de la vrd correctement. Donc ma solution est la vraie solution, sans aucune erreur. Bien que le simple exemple de votre lien fonctionne très bien, il ne gère pas possible et courant usecases. Meilleures salutations
    InformationsquelleAutor kaiser