Many a times, it used to be a difficult task to incorporate a div inside a HTML document that can be re-sized and dragged dynamically.I was quite intrigued on the draggable and re-sizable feature that can be used on HTML divs.This blog depicts on incorporating a drag-able and re-sizable feature on a HTML document using ExtJS framework. Special thanks to Reeta Kumari for providing advise on technology integration. This code snippet was built on an ExtJS framework, where by multiple divs inside a HTML document can have the property of being re sized. This code too supports the re-sizable feature for the divs. In this case, we have two divs with div-ids "textdata" and "blockdata". As you are aware, the Ext.onReady function will be called immediately upon page load. This function in turn will look for all the divs. The attribute "res" is provided as an attribute to differentiate between the divs which require the draggable and re-sizable feature and the normal one. The re sizable divs in turn will have the id as "resizetextdata" and "resizeblockdata" (resize + textdata). Click here to watch it in action.







Re-sizable and Draggable divs







This is the first Div
Click on the blue box and drag
Click on the border and drag it for resizing!!



This is the Second Div
Click on the green box and drag
Click on the border and drag it for resizing!!














More...