html 拖拽 改变布局大小,兼容IE和Chrome的拖动改变布局宽度

IE中通过setCapture监听鼠标按下和移动，Chrome浏览器中没有相应的方法，所以通过其它方式来实现。

兼容IE和Chrome的拖动改变布局宽度

var leftWidth;

var widths=[140,0];

var iw=1;

var swidth;

var sheight;

function get(id) {

return document.getElementById(id)

}

function SwitchLeftWidth(){

document.all("left").style.width=widths[iw];

iw++;

if(iw>=widths.length) iw=0;

}

function startResize(){

if(resizeBox.setCapture){

resizeBox.setCapture();

resizeBox.οnmοusemοve=function(e){

var w=(e||event).x-6;

if(w<0) w=0;

document.all("left").style.width=w;

}

resizeBox.οnmοuseup=function(){

resizeBox.releaseCapture();

leftWidth=document.all("left").style.pixelWidth;

resizeBox.οnmοusemοve=null;

resizeBox.οnmοuseup=null;

}

}else{

var oLeft = get("left"),oMain =get("main"),

oMainTd =get("mainTd");

var oWrapperDiv=ge("wrapperDiv");

swidth = document.body.clientWidth;

sheight = document.body.clientHeight;

document.οnmοusemοve=function(e){

if(oWrapperDiv.style.display=="none"){

oWrapperDiv.style.width=swidth;

oWrapperDiv.style.height=sheight;

oWrapperDiv.style.display="";

}

var w=(e||event).screenX-6;

if(w<0) w=0;

//oLine.style.left =w+ "px";

//oMain.style.left = w + "px";

oLeft.style.width=w+ "px";

oMain.style.width=(oMain.style.width-w)+ "px";

//oMainTd.style.width=(oMainTd.style.width-w)+ "px";

return false

}

document.οnmοuseup=function(){

oWrapperDiv.style.display="none";

leftWidth=document.all("left").style.pixelWidth;

document. = null;

document. = null;

}

}

}

border=0 id="box" >

class="easyui-resizable" >

style="z-index: 2; visibility: inherit; width: 140; height: 100%;"

name=left src="a.html" frameBorder=0

scrolling=auto>

style="position:relative;cursor:e-resize;left:0;">

style="cursor:pointer;width:8px;height:50px;background:#FF0000" >

style="z-index: 1;visibility: inherit; width: 100%; height: 100%;"

name=main src="b.html" frameBorder=0

scrolling=yes>

resizeBox.

a

left

dd

注：wrapperDiv的处理是为了一360极速浏览器的兼容模式等的情况