As an example, say I have a box on my page that I want to drag around and make resizable. Out-of-the-box, jQuery UI provides two widgets to enable this behavior - Draggable and Resizable. You can easily combined these two widgets on your box element to enable both behaviors:
Pretty easy, right? Now you can add more functionality - even responding to critical events defined by each widget:
grid: [50, 50],
stop: function (e, ui)
As you can see, just by combining some of the built-in UI widgets, you can build some pretty sophisticated logic just by combining two (or more) widgets together.
In part 2, we'll explore how to encapsulate this new behavior into a custom widget: ColorBox.