Swipe list - differentiate between swipe and drag

I’m using the ion-item-sliding for todos and I want the item to execute a method (like delete) only for a swipe gesture while the user still can drag the item. Thus if the user starts to swipe but doesn’t let go it will count as a drag action.

so far the ionSwipe has a _openAmount property which lets me set a value before the task is checked off.

	checkOff(task: Task, event) {
		if (event._openAmount > 70) {
		    task.isOpen = false

I’m using ngClass to let the item translateX out of the screen

this however is not user friendly since the user has to swipe a distance of 70px and any swipe/drag longer than 70px will trigger the ngClass.

Is there a way to distinguish between a drag and swipe?


Did you check here?

Best way swipes were used in apps, is to show buttons to trigger action after swipes.

thanks for the reply and ux suggestion. Is there a reference why it is better? Most Todolist apps like wunderlist oder todoist or even emal use the single swipe to trigger an action, which is i guess one action less than swipe then click.


I am glad I was helpful. I read nice article on contextual swipe here.

I personally think swipe action without button (with contextual text) is a bit confusing because I am not aware what its gonna do. I like to use it for pull to refresh though.

Thanks for the reference! I will however only implement the delete swipe and use a toast for confirmation. This will be consistent enough i guess. If I was to implement more contextual actions buttons, i’d slide to reveal for sure.