Swiping Cards Problem side panel opening up

1

I have created a little code to imitate tinder-like Cards, but i got 2 Problems:

  • on mobile devices once i start swiping the left panel opens up

Here is the code which controles the swiping:

			$(document).on("mousedown touchstart", ".rec__card:not(.inactive)", function(e) {
				if (animating) return;
				e.preventDefault();

				$card = $(this);
				$card.addClass("moving");
				$cardReject = $(".rec__card__choice.m--reject", $card);
				$cardLike = $(".rec__card__choice.m--like", $card);
				var startX =  e.pageX || e.originalEvent.touches[0].pageX;

				$(document).on("mousemove touchmove", function(e) {
					var x = e.pageX || e.originalEvent.touches[0].pageX;
					pullDeltaX = (x - startX);
					if (!pullDeltaX) return;
					pullChange(this);
				});

				$(document).on("mouseup touchend", function() {
					$(document).off("mousemove touchmove mouseup touchend");
					$card.removeClass("moving");
					if (!pullDeltaX) return; // prevents from rapid click events
					release(this);
				});
			});
2

when you say :

e.preventDefault(); on ".rec__card:not(.inactive)"

what exactly is the default that you want to prevent ?

your “nested event listener” doesn’t look good

3

Add “no-swipe-panel” to swipeable cards and it won’t open panel

1 Like
4

i have removed that already this was just a try to prevent the panel to open

adding no-swipe-panel did the job :slight_smile: thx a lot

should maybe writting in docs somewhere :slight_smile:

5

is there a possibility for me to make a new framework7 component which could potential end up in the final build? :smiley:

6

If it is something not very huge and will be useful for everyone then there is a probability. Otherwise it could be easier to make it as plugin and post in Plugins section at http://framework7.io/plugins/