如何从顶部滑下JQuery移动

我正试图让事件上下滑动，而不是左右

我有这张图像显示：

我可以使用箭头图标（onClick（））来处理事件，但是我想添加向上滑动事件，添加滑动事件时它在左侧工作，我希望它下来，因为图像显示任何帮助？

Answer 1

jQuery Mobile本身为我们提供了捕获swipeleft和swiperight的能力。 但是，它并没有给我们提供滑动和滑出框。 为了适应jQuery团队为swipeleft和swiperight所做的工作，我们能够以相同的方式创build和捕获这些事件。 请参阅下面的代码来实现swipeup和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); } }; }); })(); 

这里是Blackdynamo的答案

Answer 2

我在这里接受的答案有问题，因为刷卡的起始和目标不相同时没有检测到刷卡。

这里也许有一个更简单的答案，我直接覆盖jquery的handleSwipe事件（基于jquery.mobile-1.4.5），并附加一个垂直滑动，调用向上和向下：

 (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 );