拖动层的javasvript代码 十行代码即可写出兼容版拖动层
16lz
2021-01-22
这是帮一个CSDN网友写的一个拖动层改变层尺寸DEMO
核心代码如下：
var
wrapId
=
"
dragDiv
"
;
var
wrap
=
getElementById(wrapId);
var
isChangeLayout;
wrap.onmouseover
=
function
()
{
isChangeLayout=getElementById('layout').checked?true:false;
wrap.style.cursor=isChangeLayout?"move":"se-resize";
if(window.ActiveXObject)
wrap.onselectstart=function(){event.returnValue=false;}
document.onmousedown=function(evt){
/*savetheoriginalcoordinates*/
evt=window.event||evt;vara=getAbsoluteCoords(wrap);
wrap.cx=evt.clientX-(isChangeLayout?a.left:a.width);
wrap.cy=evt.clientY-(isChangeLayout?a.top:a.height);
document.onmousemove=function(evt){
/*changethecoordswhenmouseismoveing*/
evt=window.event||evt;try{
if(isChangeLayout){
wrap.style.left=(evt.clientX-wrap.cx)+"px";
wrap.style.top=(evt.clientY-wrap.cy)+"px";
}else{
wrap.style.width=(evt.clientX-wrap.cx)+"px";
wrap.style.height=(evt.clientY-wrap.cy)+"px";
}
}catch(ex){};
};
document.onmouseup=function(){
/*dragendreleasetheevent*/
document.onmousemove=null;
document.onmouseup=null;
wrap.style.cursor="default";
};
};
}
核心代码如下：