Forum | Appery.io

The swipeleft event in jquery provides the following parameters

e.pageX,
e.pageY
e.startX, e.startY
e.distX, e.distY
e.velocityX, e.velocityY

However when I implement some javascript inside a swipeleft event in Appery, I am not able to capture any of these parameters.

My code looks like this:
var event = arguments[0];
alert( event.pageX);

Is there a different word I should use to capture such parameters?

If you can give a few more details then it will be easier to answer that question. There are 3 events related to Swipe in Appery - Swipe, Swipeleft and Swiperight.

Thanks for the quick reply.

I have a list of items and would like to reveal a button when the user swipes any item in this list, similar to what's available in Mail for IOS and many other apps.

I have attached a swipeleft event to the list item, but I would need to know the finger position when the swipeleft event is triggered.

Thank you

well, if all you want to know is which item the swipe was on - you can simply get the text of that item using this:

code
// List Item Swipeleft event
console.log('You swiped left on:' + $(this).text()); // Will display the text of the swiped list item
/code

code
// List Item Swiperight event
console.log('You swiped right on:' + $(this).text()); // Will display the text of the swiped list item
/code

Is there any specific reason you would want to know the finger position? I mean we can easily write some js/jquery to get all that information but if the need is much simpler I would prefer lesser code. It's always cleaner and faster that way.

Thanks, I would not need to know the item or text where the swipe was.

I would need to move that item horizontally towards the left and to do so I would need to know the coordinates of the finger.

But if you are real serious about handling a lot of such stuff, then using a jquery plugin / library like TouchSwipe will be helpful: http://labs.rampinteractive.co.uk/tou...

Firstly have you figured out how you are going to 'move' the list item horizontally towards the left? Because you cannot just pluck out a list item and place them at a custom location without some custom javascript or jquery. I think that is the more difficult task - getting to know which item was swiped and in which direction is the easy part. And there is one more thing - you cannot really go for the absolute finger position and place things based on that - It will all end up haphazard manner. If you do up a screenshot or any simple image describing the location / movement it will be easier to come up with a solution

Moreover if you are pulling out the list items you may want to plant them back as well, on another swipe event, if the user so decides

Thanks. I have loaded the plugin you recommended but I haven't been able to attach the swipe event to the list item, whether by using the list id or the listitem class.

Appery already implements a swipeleft event, which works well, here's what's confusing to me. I am assuming that the Appery swipeleft event is based on jquery. Jquery events should return a number of parameters, as described here:
https://api.jquery.com/category/event...

However, this javascript attached to a swipeleft event:

var event = arguments[0];

alert("event:type " + event.type + "; event:result " + event.result + "; event:pageX " + event.pageX);

returns the following when I run the app:
event:type swipeleft; event:result undefined; event:pageX undefined

Why are these parameters undefined?

About your question on moving the list item, I was planning to change margin-left in order to move the item, which would work, if I could get the position of the finger.

To attach it to an element, say by the name of "myelement"
code
<div id="myelement">Swipe here!<>

<script type="text/javascript">
$("#myelement")&#46;swipe({
swipe: function(event, direction, distance, duration, fingerCount) {
$(this)&#46;text("You swiped myelement: " + direction );
}
});
</script>
/code

Have a look at what the function returns - what type of object and does it supply you with the properties that you are looking for. For example swipe returns you

swipe ( EventObject event, int direction, int distance, int duration, int fingerCount, object fingerData )

More information on the swipe event is available here
http://labs.rampinteractive.co.uk/tou...

If you are adding items dynamically then probably your event listener may not work . A work around is to attach the event listener to the parent element instead.

Btw as for the positioning of the list item differently - I'd say you must give it a try. You'll probably find it harder than you think. One way would be to have 2 identical list boxes placed beside each other. Then if you swipe one item then make it visible in the left side list item group and hide it in the right side list item group.

And one more thing about why those are undefined. If you look at the swipe event, or swipeleft, it will pass you only one object which you can refer to in your JS by 'this' which is an object, and more precisely an event object i guess. You gota see what information that object is capable of supplying you with. Probably you can even write a few lines of JS to enumerate all the information that it is holding