Swipe list - differentiate between swipe and drag

Ionic Framework ionic-v3
1

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?

Thanks

2

Did you check here?

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

3

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.

Cheers

4

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.

5

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.

Cheers