超简单实现 .NET开发类似Web Parts的功能

标签，暂时先不显示，鼠标形状为move，

* 背景为白色，底部padding为0px，直接创建在下。最后返回am
*/
function createDiv()
{
if(!am)
{
  am=document.createElement("DIV");
  am.style.display="none";
  am.style.position="absolute";
  am.style.cursor="move";
  am.style.backgroundColor="#ffffff";
  am.style.paddingBottom="0px";
  document.body.appendChild(am)
}
return am
}

/**
* 核心代码
* al是这样一个对象，它有一个属性obj，默认为null，和init/start/drag/end/fixE五个方法
* init() ---- 设置初始方法
* 设置元素a的onmousedown事件响应为al.start方法，并设置am（那个直接隶属于
*  的隐藏

）的左边在页面左上角（如果没有设置过的话），设置上a的空拖拽
*  事件
* start() --- 拖拽开始事件

*  设置全局变量aa和al.obj为事件源（同一时刻只能有一个box在drag状态）。得到隐藏div
*  元素的坐标和当前事件的鼠标坐标，回掉aa变量在initHead()函数中注册的onDragStart()函数（将
* 隐藏div内容填好，移动到鼠标位置）。将当前鼠标坐标记录在aa变量中。设置鼠标移动

*  事件响应和鼠标抬起事件响应。

* drag() ---- 拖拽中事件

*  设置全局变量aa为事件源。得到当前鼠标坐标和移动中的div的位置，与上次鼠标坐标相比

*  计算出偏移量，修改移动中的div的坐标。记录鼠标当前位置，回掉aa的onDrag()函数。设置

*  al.obj为null，等待下个box的移动。

* end() ----- 拖拽结束事件
*  设置onmousemove和onmouseup不响应事件，回掉aa的onDragEnd()函数。

* fixE()
*  确保浏览器兼容性，保证变量a为event事件，并修正事件的layerX/Y（似乎没有用处）
*/
var al = {"obj":null,
"init":function(a){
  a.onmousedown=al.start;
  if ( isNaN(parseInt(createDiv().style.left)) ) {
   createDiv().style.left="0px";
  }
  if ( isNaN(parseInt(createDiv().style.top)) ) {
   createDiv().style.top="0px";
  }
  a.onDragStart=new Function();
  a.onDragEnd=new Function();
  a.onDrag=new Function()
  },
"start":function(a){
  var aa=al.obj=this;
  a=al.fixE(a);
  var ab=parseInt(createDiv().style.top);
  var ac=parseInt(createDiv().style.left);
  aa.onDragStart(ac,ab,a.clientX,a.clientY);
  aa.lastMouseX=a.clientX;
  aa.lastMouseY=a.clientY;
  document.onmousemove=al.drag;
  document.onmouseup=al.end;
  return false
  },
"drag":function(a){
  a=al.fixE(a);
  var aa=al.obj;
  var ab=a.clientY;
  var ac=a.clientX;
  var ad=parseInt(createDiv().style.top);
  var ae=parseInt(createDiv().style.left);
  var af,ag;
  af=ae+ac-aa.lastMouseX;
  ag=ad+ab-aa.lastMouseY;
  createDiv().style.left=af+"px";
  createDiv().style.top=ag+"px";
  aa.lastMouseX=ac;
  aa.lastMouseY=ab;
  aa.onDrag(af,ag,a.clientX,a.clientY);
  return false
  },
"end":function(){
  document.onmousemove=null;
  document.onmouseup=null;
  al.obj.onDragEnd(parseInt(createDiv().style.left),parseInt(createDiv().style.top));
  al.obj=null
  },
"fixE":function(a){
  if (typeof a=="undefined") {
   a=window.event;
  }
  if (typeof a.layerX=="undefined") {
   a.layerX=a.offsetX;
  }
  if (typeof a.layerY=="undefined") {
   a.layerY=a.offsetY;
  }
  return a
  }
};

var aw=false;
/**
* 本函数作用是设置所有标题可拖动，给元素加入拖拽事件响应代码。

* 本函数只执行一次，aw为true时函数直接返回。

* 对第一列c_1、第二列c_2、第三列c_3做初始设置。每一列下均有若干id为m_x的

标签
* 每一个

标签内容均为一个，该table中有一个

命名为m_x_h，这就是可可拖拽的

* 标题。得到这个

元素，加入拖拽事件代码，就是本函数的作用。

*/
function initHead(a)
{
if(aw)return;
aw=true;
//设置全局变量colArray为当前要处理的列数组，也即三个id为c_1、c_2和c_3的

元素
colArray=a;
//数组colArray中的每个元素都要执行。其实数组colArray只有三个元素，c_1、c_2和c_3，也即第一/二/三列
for(var i=0;i {//对所有c_x的子结点遍历，其实也就是命名为m_x的div标签。最后一个div标签有其它用处，
  //故此处length-1
  for(var j=0;j  {
   var module_i=colArray[i].childNodes[j];
   var head_i=_getElementById(module_i.id+"_head");
   if(!head_i)
    continue;

   //此刻，已经得到了id为m_x_h的

元素，即box的标题td
//将整个大

记录在ad对象的module属性中，这个module属性是？？？？
   head_i.module=module_i;
   //用al对象的init方法初始化可拖拽标题td。

   al.init(head_i);

   //得到m_x_h的元素，即id为m_x_url的
   var url_i=_getElementById(module_i.id+"_url");
   if(url_i)
   {//设置的h属性为ad（即上层标题的

元素）,这个h属性是？？？？
url_i.h=head_i;
//当超级链接被点中，设置上层标题

的href和target属性

    //为当前超级链接的href和target属性。这样用户也可以拖超级链接

    url_i.onmousedown=function() {
     this.h.href=this.href;
     this.h.target=this.target;
    }
   }

   var more_i=_getElementById(module_i.id+"_more");
   if(more_i)
   {
      more_i.module=module_i;
      more_i.onmouseover=function() {var op_i=_getElementById(this.module.id+"_op");if(op_i) op_i.style.display="";}
      more_i.onmouseout =function() {var op_i=_getElementById(this.module.id+"_op");if(op_i) op_i.style.display="none";}
   }