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:
- Listening for onmspointerdown, onmspointerup, onmspointercancel events.
- Creating and statically assigning an MSGesture object to each UI element.
- Creating and dynamically assigning MSGesture objects to UI elements, as needed.
- Listening for and managing gestures and manipulations through MSGesture Document Object Model (DOM) events.
- Listening for onmousewheel events and processing mouse wheel data as pointer input for gesture support.
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 | |
|---|---|
| Server |
Build the sample
- Start Visual Studio 2013 and select File > Open > Project/Solution.
- 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.
- 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.