Unable to swipe away card in ionic

Ionic Framework ionic-v3
1 
<div swing-stack #myswing1 [stackConfig]="stackConfig" (throwoutleft)="voteUp(false)" (throwoutright)="voteUp(true)" id="card-stack">
    <ion-card #mycards1 swing-card class="td-card">
        <img src="assets/imgs/lap.jpg" (click)="openPage()">
        <ion-card-content>
              ....
</ion-card-content>
    </ion-card>
</div>

This is HTML code i’m using. when i swipe the card and release,it is coming back to it’s original position.How can I swipe away them completely.

This is .ts file

 export class FeedsPage {
  @ViewChild('myswing1') swingStack: SwingStackComponent;
  @ViewChildren('mycards1') swingCards: QueryList<SwingCardComponent>;
  stackConfig: StackConfig;
  recentCard: string = '';


  constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController,private nativePageTransitions: NativePageTransitions)
   {
    this.stackConfig = {
      throwOutConfidence: (offset, element: any) => {
        return Math.min(Math.abs(offset) / (element.offsetWidth / 2), 1);
      },
      transform: (element, x, y, r) => {
        this.onItemMove(element, x, y, r);
      },
      throwOutDistance: (d) => {
        return 800;
      }
    };

   }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FeedsPage');
  }

  openPage() {
    let options: NativeTransitionOptions = {
      direction: 'down',
      duration: 100,
      slowdownfactor: -1,
      iosdelay: 50,
      androiddelay: 50, 
    }
    this.nativePageTransitions.fade(options);
    this.navCtrl.push(JobDetailPage);
  }
  showAlert() {
    let modal = this.modalCtrl.create(ModalPage);
    modal.present();

  }
  ngAfterViewInit() {
    // Either subscribe in controller or set in HTML
    this.swingStack.throwin.subscribe((event: DragEvent) => {
      event.target.style.background = '#ffffff';
    });

  }
  onItemMove(element, x, y, r) {
    let color = '';
    const abs = Math.abs(x);
    const min = Math.trunc(Math.min(16 * 16 - abs, 16 * 16));
    const hexCode = this.decimalToHex(min, 2);

    if (x > 0) {
      color = '#' + hexCode + 'FF' + hexCode;
    } else {
      color = '#FF' + hexCode + hexCode;
    }

    element.style.background = color;
    element.style['transform'] = `translate3d(0, 0, 0) translate(${x}px, ${y}px) rotate(${r}deg)`;
  }


  decimalToHex(d, padding) {
    let hex = Number(d).toString(16);
    const numPadding = typeof (padding) === 'undefined' || padding === null ? 2 : padding;

    while (hex.length < numPadding) {
      hex = '0' + hex;
    }

    return hex;
  }
}

I don’t know why it is coming back.Can someone figure out what is problem tell me the solution.

2

Play with

 throwOutConfidence: (offset, element: any) => {
     return Math.min(Math.abs(offset) / (element.offsetWidth / 2), 1);
 }

aka modify it for your need. This define when (distance etc.) the card should be thrown away

3

what should i change in it.I’m new to typescript.

4

the code I displayed above, the operation

5

no use i have changed it no use.

6

well that’s the operation to scale de throwoutleft and throwoutright