Using Ionic's Built in Gestures

Got inspired and built a small example of what you can do with the built in gestures in Ionic.

I had to use hammer.js touch-emulation to get it to work, so in codepen, holding shift and clicking/draging will mock pinching.

Cheers :beers:


holding shit and clicking/draging will mock pinching.

I laughed more than I should :smiley:


Welp…thats embarrassing :blush: haha

All fixed now, hope that didn’t cause any abdominal discomfort


I’ve done a fork of that

Is there anyway I can make the box’s z-index higher than the headerbar?

I think I’ll try making something similar to fb chat’s floating icon in my app,

Really nice thanks for this

You can, but you have to change some css around.


Great Job :blush:

These Will Help Me To Solve Gestures Problem In Jr-Crop Plugin With Ionic.

Thanks, @mhartington

Hello there,

I’m having a hard time searching in the Internet on how can access Ionic’s function like for example

$('#canvas').on('swipeleft', function() {} );

I don’t know if it’s ionic or $ to access some basic functionality because I get errors after that code.
Do I need to include some other js files?

Hope you reply soon. Thanks!

Take a look at the doc over here.$ionicGesture/

You would build a directive like I did and pass in the element that has the directive.
Also, your code looks very similar to something you would do with jquery, which won’t work in angular.

You should give this SO post a read to help understand a bit better.

@mr5zz I guess this post will solve your problem =>

Hi @mhartington thanks a lot for this codepen…
Any idea how I can set a bounding box which would restrict the movement of the div?

I tried setting it via

if square.getBoundingClientRect().left < leftXLimit = leftXLimit

But it did not work.

Did you ever get to figure this out?

Hi @mhartington I too am trying to bound the drag element to a box but I am having no luck. Can you help with this?

Hi @stpn I achieved it by adding this within the directive @mhartington done.

          case 'drag':
            var square = angular.element(document.querySelector('.square'));
            parentHeight = $element.parent().prop('clientHeight');
            parentWidth = $element.parent().prop('clientWidth');
            elementW = $element.prop('clientWidth');
            elementH = $element.prop('clientHeight');
            x = e.gesture.deltaX + lastPosX;
            y = e.gesture.deltaY + lastPosY;
            if (x >= 0 && x <= (parentWidth - elementW)) {
              posX = e.gesture.deltaX + lastPosX;
            if (y >= 0 && y <= parentHeight - elementH) {
              posY = e.gesture.deltaY + lastPosY;