Ionic 2 (pan) gesture - How to fire onMouseUp?

showcase
1

Hey everyone,

I’m using the (pan) gesture to slide an element, and I’d like to record the X position of the element when the user ends the pan event, via some kind of mouse up. Is there a way to do this, using the (pan) gesture??

1 Like
2

I also have this problem. Did you manage to solve this?

3

After a pan gesture, on mouse up the panEnd event fires up. I don’t know if it takes arguments to show the x position. I have used the following code to pan an image:

image.ts:

export class ImagePage {
  bgHorz:   number = 0 ;
  lastBgH:  number = 0 ;
  bgVert:   number = 0 ;
  lastBgV:  number = 0 ;
  imageUrl: string = "" ;

   //----------------------------------
   panEvent($e) {
      var stepH = $e.deltaX /10 ;
      var stepV = $e.deltaY /10 ;

      this.bgHorz = this.lastBgH - stepH ;
      if (this.bgHorz < 0) {
         this.bgHorz = 0 ;
      } else {
         if (this.bgHorz > 100)
            this.bgHorz = 100 ;
      }

      this.bgVert = this.lastBgV - stepV ;
      if (this.bgVert < 0) {
         this.bgVert = 0 ;
      } else {
         if (this.bgVert > 100)
            this.bgVert = 100 ;
      }
   }

   //----------------------------------
   panEnd() {
      this.lastBgH = this.bgHorz ;
      this.lastBgV = this.bgVert ;
   }

   //----------------------------------
   calcStyle() {
      var style = {
          backgroundImage : 'url('+this.imageUrl+')',
          backgroundPositionX : this.bgHorz+'%',
          backgroundPositionY : this.bgVert+'%'
      } ;
      return style ;
   }

image.html:

   <div [ngStyle]="calcStyle()">
      <div class="full" (pan)='panEvent($event)' (panEnd)='panEnd()'>
      </div>
   </div>

It works fine with horizontal pan gestures. Vertical pan works only when the horizontal component is non-zero. That is, pure vertical moves don’t work, but when the gesture is at an angle, the vertical component works fine too.
ΗΤΗ