这段代码怎么理解，求大神指教，最好能逐行注释一下

Question

<script type="text/javascript"> 
 function pan2(){
 var p=new Ext.Panel({
    title: 'Drag me',
    x: 100,
    y: 100,
    renderTo: Ext.getBody(),
    floating: true,
    frame: true,
    width: 400,
    height: 200,
    draggable: {
        insertProxy: false,
        onDrag :function(e){
            var pel = this.proxy.getEl();
            this.x = pel.getLeft(true);
            this.y = pel.getTop(true);            var s = this.panel.getEl().shadow;
            if (s) {
                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
            }
        },
        endDrag : function(e){
            this.panel.setPosition(this.x, this.y);
        }
    }
});
    }
 </script>注释函数

Answer 1

这是ext的代码
var p=new Ext.Panel({ //生成一个panel
    title: 'Drag me',//panle的标题
    x: 100,//x轴位置
    y: 100,//y轴位置
    renderTo: Ext.getBody(),//渲染到body标签
    floating: true,//是否悬浮
    frame: true,//是否有边框
    width: 400,//宽度
    height: 200,//高度
    draggable: {//是否可拖动
        insertProxy: false,
        onDrag ://开始拖动时触发的函数function(e){
            var pel = this.proxy.getEl();
            this.x = pel.getLeft(true);
            this.y = pel.getTop(true);            var s = this.panel.getEl().shadow;
            if (s) {
                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
            }
        },
        endDrag : function(e){//结束拖动是触发的函数
            this.panel.setPosition(this.x, this.y);
        }
    }
});