Frequently in web applications you will see elements that are draggable—slider handles, dialogs, column resizing handles, etc. If you have ever wondered exactly how this is accomplished, or needed to implement this behavior, then this is the chapter for you! The first step in the process is learning about mouse events.
jQuery supports eleven different mouse events. However, making an element draggable only requires understanding three of these events:
mousemove event provides the mouse position data, such as the values of
clientY, which are properties of the native event object. However, support for these properties varies between browsers. Fortunately, jQuery normalizes these properties as part of the jQuery event object. We bind the
$.mousemove event listener as follows:
// log the normalized mouse coordinates
mousemove is useful for tracking user mouse movements, which can be used to gather ...