Swipe right to Dismiss a card

stew_hering · March 10, 2016, 10:57pm

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.

JC_cap · March 11, 2016, 1:34pm

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

stew_hering · March 14, 2016, 9:35pm

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?

EffakT · March 15, 2016, 12:00am

This might help you a bit.

github.com

ionic-team/ionic-ion-swipe-cards/blob/master/ionic.swipecards.js

(function(ionic) {

  // Get transform origin poly
  var d = document.createElement('div');
  var transformKeys = ['webkitTransformOrigin', 'transform-origin', '-webkit-transform-origin', 'webkit-transform-origin',
              '-moz-transform-origin', 'moz-transform-origin', 'MozTransformOrigin', 'mozTransformOrigin'];

  var TRANSFORM_ORIGIN = 'webkitTransformOrigin';
  for(var i = 0; i < transformKeys.length; i++) {
    if(d.style[transformKeys[i]] !== undefined) {
      TRANSFORM_ORIGIN = transformKeys[i];
      break;
    }
  }

  var transitionKeys = ['webkitTransition', 'transition', '-webkit-transition', 'webkit-transition',
              '-moz-transition', 'moz-transition', 'MozTransition', 'mozTransition'];
  var TRANSITION = 'webkitTransition';
  for(var i = 0; i < transitionKeys.length; i++) {
    if(d.style[transitionKeys[i]] !== undefined) {

This file has been truncated. show original

Pay attention to the _doDrag function.

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