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.
<HTML>
<HEAD>
<TITLE> Re-sizable and Draggable divs </TITLE>
<!-- Adding the stylesheet and the JavaScript files from ExtJs library -->
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script>
Ext.onReady(function(){
var divarray=document.getElementsByTagName("div");
var barray;
for(i=0;i<divarray.length;i++)
{
var k="resize";
if(divarray[i].getAttribute('res') =="1")
{
var g=k+divarray[i].id;
var resizeid=g;
var h = k+divarray[i].id;
h = new Ext.Resizable(divarray[i].id, {
id:resizeid,
transparent:true,
disableTrackOver:true,
minWidth:0,
minHeight:0,
handles: 'all',
draggable:true,
multiDirectional:true,
resizeChild: true,
dynamic:true
});
h.on('resize',function(obj,width,height,event)
{
// Add your functionality for Resizing
//alert('write your own code here');
});
h.dd.startDrag = function(){
// Add your functionality while dragginf
// alert('write your own code here');
}
}
}
});
</script>
</HEAD>
<BODY>
<div id="textdata" res="1" style="width:300px; border:2.5px solid; font-size:12px; font-weight:bold; background-color:#99CCFF;">This is the first Div<br/> Click on the blue box and drag<br/> Click on the border and drag it for resizing!! </div>
<div id="blockdata" res="1" style=" top:40px; width:300px; border:2.5px solid; font-size:12px; font-weight:bold; background-color:#99ff99;">This is the Second Div<br/> Click on the green box and drag<br/> Click on the border and drag it for resizing!! </div>
</BODY>
</HTML>
