HomeJavaScript Working with Draggable Elements and Transparent Handles with the Ext JS Library
Working with Draggable Elements and Transparent Handles with the Ext JS Library
When it comes to building full-blown web-based interfaces, Ext JS is quite possibly one of the most powerful libraries available nowadays. It's equipped with an impressive set of JavaScript classes that allow you to create all sorts of clever things, ranging from simple yet professional message windows, to desktop-like data grids and shadowed drop-down menus. This third part of a three-part series covers just one of its features, which lets you give interesting abilities to containers.
Among the dynamic modules that comprise the Ext JS framework, there's one that might be particularly interesting to you. It presents an easy learning curve and can be used for extending the behavior of server-side applications. In this case, I'm talking about its "Resizable" class, which is useful for building containers that can be dynamically resized and dragged across a web document.
In the two previous episodes of this series, I explained how to create this kind of container, and also discussed in detail how to customize the look of the handles displayed around these web page elements. Indeed, the Ext JS library offers a decent level of customization when it comes to defining the visual aspect of resizing handles; it's possible to display then in a pinned fashion, and even make them completely transparent.
And now that I spoke about creating transparent resizing handles, in this last installment I'm going to discuss how to create these elements around resizable containers, and how to turn them into fully-draggable web page elements.
Having already outlined the goals of this tutorial of the series, it's time to learn to master the aforementioned features offered by the Ext JS framework. Let's continue this educational journey right now!
JavaScript 
/ 5 
