Detecting drag events with a gesture coordinate

Most mobile UI components leverage dragging to create a better touch-and-feel experience. One common component that you will see everywhere is the scroll list. Another example is the left or right menu. That's why it's important to understand the basic mechanism of a gesture for drag events. It's even possible for you to create custom mobile components using gesture events and pure HTML/CSS/JavaScript.

In this recipe, you will build an app example to understand how to use the data from gesture events. The app will capture drag start, duration, and end events using $ionicGesture to give you granular coordinate data for real-time processing. In terms of the UI, you will create a div box to allow the dragging and showing of a coordinate.

Getting ready

Gestures can work on both web and physical devices. However, it's highly recommended to test gestures on a physical device in order to experiment with the screen size and potential...