This sample is a basic jigsaw puzzle app (four colored tiles on a rectangular background) that demonstrates three scenarios for Windows Store apps using JavaScript: static association of MSGesture objects with UI elements, dynamic association of MSGesture objects with UI elements, and mouse wheel input.

In the first scenario, a MSGesture object is created for each UI element and enables independent interaction with any combination of tiles and container.

The second scenario, while visually similar, adds two important levels of complexity. First, to improve scalability, the MSGesture objects for the square tiles are created and freed dynamically. Second, support for two modes of interaction: one where only the container can be manipulated, and another where only a combination of the colored squares can be manipulated.

The third scenario shows how to handle mouse wheel input.

Specifically, this sample covers the following:

To obtain an evaluation copy of Windows 8.1, go to Windows 8.1.

To obtain an evaluation copy of Microsoft Visual Studio 2013, go to Visual Studio 2013.

Related topics

Windows 8 app samples
Conceptual
Responding to user interaction
Pointer and gesture events
Getting started with apps
Reference
Document Object Model (DOM) Events

Operating system requirements

Client
Windows 8.1
Server
Windows Server 2012 R2

Build the sample

  1. Start Visual Studio 2013 and select File > Open > Project/Solution.
  2. Go to the directory in which you unzipped the sample. Go to the directory named for the sample, and double-click the Microsoft Visual Studio Solution (.sln) file.
  3. Press F7 or use Build > Build Solution to build the sample.

Run the sample

To debug the app and then run it, press F5 or use Debug > Start Debugging. To run the app without debugging, press Ctrl+F5 or use Debug > Start Without Debugging.