Developing Web Components

Chapter 8. Resizing Elements

Jason Strimpel

Oftentimes in web applications you will see a drag handle, which is used to adjust the size of an element. This may be done to improve usability, or to support some functionality. For instance, the developer might make an element resizable to allow users to alter the line wrapping of text inside the element, to make it easier to read. A functional application could be for a matrix of elements that needs to be resized. In this chapter we will create a widget that can be used to make any element resizable. We will then integrate this widget into the dialog widget, so that dialog instances can optionally be made resizable.

Mouse Events and Best Practices (Recap)

The same mouse events and best practices described in Chapter 7 apply when resizing an element. If you are jumping around the book and did not read the previous chapter, you’ll find a brief synopsis of the mouse events and best practices here (although I’d advise reading the previous chapter before going further!)

Events

jQuery supports eleven different mouse events. However, making an element draggable only requires understanding three of these events:

• $.mousemove is used to get the mouse coordinates. jQuery normalizes these in the event object as the properties e.pageX and e.pageY.

• $.mousedown is used to bind the $.mousemove handler and get the initial mouse coordinates.

• $.mouseup is used to unbind the $mousemove handler to prevent excessive $mousemove events from ...