This page demostrates how to create a simple widget that extends the jQuery UI base Widget class and combines the jQuery UI widgets Draggable and Resizable. ColorBox creates a square box and constrains drag/resize to 50px increments. It also adds a color cycle animation public method and fires a moved event after a drag operation ends. The demo also shows how the different base functions are called during the life-cycle of a widget (ie _create, _init, destroy). Click the buttons to see this behavior. Use FireBug to set breakpoints to confirm the flow through the code. This demo is referenced in several of my blog posts related to the jQuery UI Widget series at BenKnowsCode.wordpress.com