HTML and CSS Reference
In-Depth Information
Chapter 7
User Interaction: Moving Objects Around
What we'll cover in this chapter:
Pressing and releasing an object
Dragging an object
Throwing
One of the goals of these interactive animations is to create a smooth user experience, and this interaction
is usually through the mouse or touch screen. Mouse and touch events were introduced in Chapter 2, but,
so far, you haven't done much with them; now, you'll get some hands-on practice.
In this chapter, you take the first steps into responding to user interaction. You learn how to handle
dragging, dropping, and throwing, but first, let's get started with the basics of press and release.
Pressing and releasing an object
The mouse is an effective, but simple device. It does two things, it detects motion and button clicks. The
computer then uses that information to do a lot more: keeping track of the position of a mouse cursor,
determining where the cursor is when the click occurs, determining how fast the mouse is moving, and
figuring out when a double-click occurs. But, when you look at it in terms of events, it all comes down to
clicks and movements.
You can also break clicks down into two parts: the event that occurs when the mouse button goes down
and the next event when it comes up. Sometimes, those events occur almost instantaneously. Other
times, the events are separated by time and motion, which is usually interpreted as a
drag
—click, move,