Enabling touch events

Drag-and-drop is very handy on mobile devices where we don't have a mouse connected; we only have our fingers to interact with the screen. This recipe will show you how to add interactivity via touch events to your web app. The way to do this is very similar to the previous recipe. We will reuse the drag-and-drop example.

How to do it...

Let's look at the touch project as explained in the following steps:

1. Prevent zooming with the following <meta> tag in touch.html:

          <meta name="viewport"
     content="width=device-width, initial-scale=1.0, user-scalable=no">

   We use the same <div> structure, each with class = "draggable", as shown in the previous recipe.

2. In touch.dart, we make a class, Touch, to contain the code specific to the touch events. An object, touch, is instantiated and the init() method is called, which prepares the board (each tile gets a different background image) and binds the touch events to event handlers:

   void main() {
     var touch = new...