列表拖拽功能

var dragobj={}
window.onerror=function(){return false}
function on_ini()// 初始化
{
     String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false};// prototype是系统内置,此处是自行扩展判断一字符串内是否包含另一字符串
     var agent=navigator.userAgent;// 获取从客户端向服务器发送的HTTP协议用户代理头的值。
     window.isOpr=agent.inc("Opera");// 判断代理头值是否包含字符Opera
     window.isIE=agent.inc("IE")&&!isOpr;// 判断代理头值是否包含字符IE
     window.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIE;// 判断代理头值是否包含字符Mozilla
     if(isMoz)// 如果是Mozilla的FireFox浏览器
     {
          Event.prototype.__defineGetter__("x",function(){return this.clientX+2});// 扩展event的属性:鼠标x坐标
          Event.prototype.__defineGetter__("y",function(){return this.clientY+2});// 扩展event的属性:鼠标y坐标
     }
     basic_ini();
}

function basic_ini()// 基本初始化
{
     window.$=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj};// 为当前网页添加方法:根据对象ID获取对象
     window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}};// 为当前网页添加方法:删除对象
}
window.onload=function()// 页面加载时
{
     on_ini();// 初始化
     var o=document.getElementsByClassName("elgg-list-item");// 获取所有的Div标题元素
     for(var i=0;i<o.length;i++)
     {
          o[i].onmousedown=function(e)// 鼠标按下时
          {
               if(dragobj.o!=null)// 如果被拖拽对象不为空(即前一对拖拽对象未释放)
                return false;
               e=e||event;// 在某些浏览器中为e?
               dragobj.o=this;// o为一个Div标题,所以取其父节点即是DIV为被拖拽对象
               dragobj.xy=getxy(dragobj.o);// 获取选中DIV边框外界相对客户区左边的坐标:上,左,宽,高
               dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0]));// 鼠标以Div边框外界左上角为原点的坐标.
               dragobj.o.style.width=dragobj.xy[2]+"px";// 设置div的宽(含边框)
               dragobj.o.style.height=dragobj.xy[3]+"px";// 设置div的高(含边框)
               dragobj.o.style.left=(e.x-dragobj.xx[0]+5)+"px";// 设置div的左边距(边框外界至客户区左边内部的距离+5)
               dragobj.o.style.top=(e.y-dragobj.xx[1]+5)+"px";// 设置div的上边距(边框外界至客户区左边内部的距离+5)
               dragobj.o.style.position="absolute";// 设置坐标为绝对位置
               dragobj.o.style.backgroundColor='#3980F4';// 设置浮动层的颜色
               dragobj.o.style.opacity="0.5"; // 设置浮动层透明度
               var om=document.createElement("div");// 创建一个DIV
               dragobj.otemp=om;// 创建一个临时对象,内部不包含任何东西
               om.style.width=dragobj.xy[2]+"px";// 设置临时对象宽度跟被拖拽对象相同
               om.style.height=dragobj.xy[3]+"px";// 设置临时对象高度跟被拖拽对象相同
               dragobj.o.parentNode.insertBefore(om,dragobj.o);// 将临时对象插入到被拖拽对象之前.占据被拖拽对象原位置,而在鼠标移动过程中根据鼠标位置,其将被移到相应位置,在相应位置撑出一个空位.
               return false
          }
     }
}
document.onselectstart=function(){return false}// 禁用选择文本
window.onfocus=function(){document.onmouseup()}// 页面获得焦点
window.onblur=function(){document.onmouseup()}// 页面失去焦点
document.onmouseup=function()// 鼠标松开时
{
     if(dragobj.o!=null)// 如果被拖拽对象不为空
     {
          dragobj.o.style.width="auto";
          dragobj.o.style.height="auto";
          dragobj.o.style.backgroundColor=""; // 设置透明层的颜色
          dragobj.o.style.opacity="1.0"; // 设置透明层透明度
          dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp);// 移动dragobj.o在dragobj.otemp之前插入
        
          dragobj.o.style.position="";
          oDel(dragobj.otemp);// 删除临时对象dragobj.otemp
          dragobj={};// 清空拖拽对象
     }
}
document.onmousemove=function(e)// 鼠标移动时
{
     e=e||event
     if(dragobj.o!=null)// 如果被拖拽对象不为空
     {
          dragobj.o.style.left=(e.x-dragobj.xx[0])+"px";// 设置被拖对象的左边距(鼠标距客户端距离-鼠标距Div边框外界的距离)跟随移动
          dragobj.o.style.top=(e.y-dragobj.xx[1])+"px";// 设置被拖对象的上边距(鼠标距客户端距离-鼠标距Div边框外界的距离)跟随移动
          createtmpl(e);// 移动过程中移到哪插到那
     }
}
function getxy(e)
{
     var a=new Array();
     var t=e.offsetTop;
     var l=e.offsetLeft;
     var w=e.offsetWidth;
     var h=e.offsetHeight;   
     a[0]=t;a[1]=l;a[2]=w;a[3]=h;
     return a;
}
function inner(o,e)
{
var scroll=document.documentElement.scrollTop
// IE document.body.scrollTop
     var a=getxy(o);
// a[0]-scroll) 注：当前的div的Y左边减去滚动条滚去页面的高度
     if(e.x>a[1]&&e.x<(a[1]+a[2])&&e.y>(a[0]-scroll)&&e.y<(a[0]-scroll+a[3]))// 如果e坐标在o的范围之内
     {   
          if(e.y<((a[0]-scroll)+a[3]/2))// 如果e坐标在o的上半部
              return 1;
          else
              return 2;// 如果e坐标在o的下半部
     }
     else
          return 0;// 如果e坐标在o的范围之外
}
function createtmpl(e)// 在鼠标移动过程中插入临时对象
{
var o=document.getElementsByClassName("elgg-list-item");
     for(var i=0;i<o.length;i++)// 遍历内部所有子DIV
     {
          if(o[i]==dragobj.o)
             continue;
          var b=inner($(o[i]),e);// 判断e相对$("m"+i)的位置:上半部,下半部,外面
          if(b==0)// 在外面
             continue;                 
          dragobj.otemp.style.width=$(o[i]).offsetWidth;  
          if(b==1)// 上半部
          {    
               $(o[i]).parentNode.insertBefore(dragobj.otemp,$(o[i]));// 在$(o[i])的前面插入dragobj.otemp
          }
          else
          {
               if($(o[i]).nextSibling==null)// 如果是最后一项
               {     
                    $(o[i]).parentNode.appendChild(dragobj.otemp);// 追加到后面
               }
               else
               {           
             
                    $(o[i]).parentNode.insertBefore(dragobj.otemp,$(o[i]).nextSibling);// 如果在下半部,则在其后一项之前插入
               }
          }
          return
     }

}