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
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
holding shit and clicking/draging will mock pinching.
I laughed more than I should
Welp…thats embarrassing haha
All fixed now, hope that didn’t cause any abdominal discomfort
Hi
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
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.
http://ionicframework.com/docs/api/service/$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 => http://forum.ionicframework.com/t/add-custom-gesture-to-the-lists-item/1974
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
square.style.left = 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'));
square.removeAttr('style')
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;
}
break;