JS实现面板拖动及兼容性处理方法

//IE10以下浏览器不支持该方法故需要封装新的获取类名对象方法

//var parent=document.getElementsByClassName("son");

function getByClass(classname,parent){
var oParent=parent?document.getElementById(parent):document;
var eles=[];
var elements=oParent.getElementsByTagName("*");
for(var i=0;i<elements.length;i++){
if(elements[i].className==classname){
eles.push(elements[i]);
}
}
return eles;
}
window.onload=newfunction;

function newfunction(){
//获取<div class="son"></div>这个对象,CSS样式就不多写了,注意position一定要为absolute
Target=getByClass("son","")[0];
//当鼠标按下对象时，调用fnDown函数
Target.onmousedown=fnDown;
}
function fnDown(event){
//获取鼠标箭头位置方法
event=event||window.event;
//光标按下时光标和面板之间的距离
disX=event.clientX-Target.offsetLeft;
disY=event.clientY-Target.offsetTop;
//鼠标移动
document.onmousemove=function(event){
event=event||window.event;
fnMove(event,disX,disY);
}
//释放鼠标时注销移动事件
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
function fnMove(e,posX,posY){
l=e.clientX-posX;

t=e.clientY-posY;

       //防止面板移出屏幕处理方法

windowW=document.documentElement.clientWidth||document.body.clientWidth;
windowH=document.documentElement.clientHeight||document.body.clientHeight;
maxW=windowW-Target.offsetWidth;
maxH=windowH-Target.offsetHeight;
if(l<0){
l=0;
}else if(l>maxW){
l=maxW;
}
if(t<0){
t=0;
}else if(t>maxH){
t=maxH;
}
Target.style.left=l+"px";
Target.style.top=t+"px";

}