Swipe right to Dismiss a card


#1

Hello, In an app I am creating I currently have a list of cards built like this:
<div class="card" ng-repeat="item in tasks" id="task"> <div class="item item-divider item-assertive"> <div class="row"> <div class="col col-33 left-text"><b>{{time(item.time)}}</b></div> <div class="col col-33 col-offset-33 right-text">{{float2int(item.duration/60)}}h {{item.duration%60}}m</div> </div> </div> <div class="item item-text-wrap"> {{item.description}} </div> </div>

Does anyone know how I would setup my code so that a right swipe/drag on a card will dismiss it. I do not have a problem eliminating the card from the array but I do not know the JS required to swipe them away.


#2

Did you try ng-swipe-right=“removeCard()” ?


#3

I would like the card to move as it is being swiped, how would I do this? Should I just animate it in the removeCard() function? If so any advice for animating it?


#4

This might help you a bit.

Pay attention to the _doDrag function.

The general idea is that as you drag, you are updating the location of the card.