JavaScript Working with Draggable Elements and Transparent Handles with the Ext JS Library |
Introduction 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!
|