列表拖拽功能
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
}
}
