可拖动可改变大小div的实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Dialog</title> 
<style type="text/css"></style><style type="text/css" bogus="1">.dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px;} 
.dialogtitle{height:26px; width:auto; background-image:url('http://files.glzy8.com/file_images/200908/103444839.p.gif');} 
.dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; } 
.dialogtitleico{float:right; height:20px; width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://files.glzy8.com/file_images/200908/103419495.p.gif');background-position:-21px 0px} 
.dialogbody{ padding:10px; width:auto; background-color: #FFFFFF;} 
.dialogbottom{ 
bottom:1px; right:1px;cursor:nw-resize; 
position:absolute; 
background-image:url('http://files.glzy8.com/file_images/200908/103419495.p.gif'); 
background-position:-42px -10px; 
width:10px; 
height:10px; 
font-size:0;}</style> 
</head> 
<body > 
<input value="创建" type="button" onclick="creat()" /> 
<div id='aa'></div> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%3C!--%20%0D%0Avar%20z%3D1%2Ci%3D1%2Cleft%3D10%20%0D%0Avar%20isIE%20%3D%20(document.all)%20%3F%20true%20%3A%20false%3B%20%0D%0A%0D%0Avar%20%24%20%3D%20function%20(id)%20%7B%20%0D%0Areturn%20document.getElementById(id)%3B%20%0D%0A%7D%3B%20%0D%0A%0D%0Avar%20Extend%20%3D%20function(destination%2C%20source)%20%7B%20%0D%0Afor%20(var%20property%20in%20source)%20%7B%20%0D%0Adestination%5Bproperty%5D%20%3D%20source%5Bproperty%5D%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Avar%20Bind%20%3D%20function(object%2C%20fun%2Cargs)%20%7B%20%0D%0Areturn%20function()%20%7B%20%0D%0Areturn%20fun.apply(object%2Cargs%7C%7C%5B%5D)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Avar%20BindAsEventListener%20%3D%20function(object%2C%20fun)%20%7B%20%0D%0Avar%20args%20%3D%20Array.prototype.slice.call(arguments).slice(2)%3B%20%0D%0Areturn%20function(event)%20%7B%20%0D%0Areturn%20fun.apply(object%2C%20%5Bevent%20%7C%7C%20window.event%5D.concat(args))%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Avar%20CurrentStyle%20%3D%20function(element)%7B%20%0D%0Areturn%20element.currentStyle%20%7C%7C%20document.defaultView.getComputedStyle(element%2C%20null)%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20create(elm%2Cparent%2Cfn)%7Bvar%20element%20%3D%20document.createElement(elm)%3Bfn%26%26fn(element)%3B%20parent%26%26parent.appendChild(element)%3Breturn%20element%7D%3B%20%0D%0Afunction%20addListener(element%2Ce%2Cfn)%7B%20element.addEventListener%3Felement.addEventListener(e%2Cfn%2Cfalse)%3Aelement.attachEvent(%22on%22%20%2B%20e%2Cfn)%7D%3B%20%0D%0Afunction%20removeListener(element%2Ce%2Cfn)%7B%20element.removeEventListener%3Felement.removeEventListener(e%2Cfn%2Cfalse)%3Aelement.detachEvent(%22on%22%20%2B%20e%2Cfn)%7D%3B%20%0D%0A%0D%0Avar%20Class%20%3D%20function(properties)%7B%20%0D%0Avar%20_class%20%3D%20function()%7Breturn%20(arguments%5B0%5D%20!%3D%3D%20null%20%26%26%20this.initialize%20%26%26%20typeof(this.initialize)%20%3D%3D%20'function')%20%3F%20this.initialize.apply(this%2C%20arguments)%20%3A%20this%3B%7D%3B%20%0D%0A_class.prototype%20%3D%20properties%3B%20%0D%0Areturn%20_class%3B%20%0D%0A%7D%3B%20%0D%0A%0D%0Avar%20Dialog%20%3D%20new%20Class(%7B%20%0D%0Aoptions%3A%7B%20%0D%0AWidth%20%3A%20400%2C%20%0D%0AHeight%20%3A%20400%2C%20%0D%0ALeft%20%3A%20100%2C%20%0D%0ATop%20%3A%20100%2C%20%0D%0ATitleheight%20%3A%2026%2C%20%0D%0AMinwidth%20%3A%20200%2C%20%0D%0AMinheight%20%3A%20200%2C%20%0D%0ACancelIco%20%3A%20true%2C%20%0D%0AResizeIco%20%3A%20false%2C%20%0D%0AInfo%20%3A%20%22%E6%96%B0%E9%97%BB%E6%A0%87%E9%A2%98%22%2C%20%0D%0AContent%20%3A%20%22%E6%97%A0%E5%86%85%E5%AE%B9%22%2C%20%0D%0AZindex%20%3A%202%20%0D%0A%7D%2C%20%0D%0Ainitialize%3Afunction(options)%7B%20%0D%0Athis._dragobj%20%3D%20null%3B%20%0D%0Athis._resize%20%3D%20null%3B%20%0D%0Athis._cancel%20%3D%20null%3B%20%0D%0Athis._body%20%3D%20null%3B%20%0D%0Athis._x%20%3D%200%3B%20%0D%0Athis._y%20%3D%200%3B%20%0D%0Athis._fM%20%3D%20BindAsEventListener(this%2C%20this.Move)%3B%20%0D%0Athis._fS%20%3D%20Bind(this%2C%20this.Stop)%3B%20%0D%0Athis._isdrag%20%3D%20null%3B%20%0D%0Athis._Css%20%3D%20null%3B%20%0D%0A%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%20%0D%0Athis.Width%20%3D%20this.options.Width%3B%20%0D%0Athis.Height%20%3D%20this.options.Height%3B%20%0D%0Athis.Left%20%3D%20this.options.Left%3B%20%0D%0Athis.Top%20%3D%20this.options.Top%3B%20%0D%0Athis.CancelIco%20%3D%20this.options.CancelIco%3B%20%0D%0Athis.Info%20%3D%20this.options.Info%3B%20%0D%0Athis.Content%20%3D%20this.options.Content%3B%20%0D%0Athis.Minwidth%20%3D%20this.options.Minwidth%3B%20%0D%0Athis.Minheight%20%3D%20this.options.Minheight%3B%20%0D%0Athis.Titleheight%3D%20this.options.Titleheight%3B%20%0D%0Athis.Zindex%20%3D%20this.options.Zindex%3B%20%0D%0AExtend(this%2Coptions)%3B%20%0D%0ADialog.Zindex%20%3D%20this.Zindex%20%0D%0A%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%20%E6%9E%84%E9%80%A0dialog%20%0D%0Avar%20obj%20%3D%20%5B'dialogcontainter'%2C'dialogtitle'%2C'dialogtitleinfo'%2C'dialogtitleico'%2C'dialogbody'%2C'dialogbottom'%5D%3B%20%0D%0Afor(var%20i%20%3D%200%3Bi%3Cobj.length%3Bi%2B%2B)%20%0D%0A%7B%20obj%5Bi%5D%3Dcreate('div'%2Cnull%2Cfunction(elm)%7Belm.className%20%3D%20obj%5Bi%5D%3B%7D)%3B%20%7D%20%0D%0Aobj%5B2%5D.innerHTML%20%3D%20this.Info%3B%20%0D%0Aobj%5B4%5D.innerHTML%20%3D%20this.Content%3B%20%0D%0Aobj%5B1%5D.appendChild(obj%5B2%5D)%3B%20%0D%0Aobj%5B1%5D.appendChild(obj%5B3%5D)%3B%20%0D%0Aobj%5B0%5D.appendChild(obj%5B1%5D)%3B%20%0D%0Aobj%5B0%5D.appendChild(obj%5B4%5D)%3B%20%0D%0Aobj%5B0%5D.appendChild(obj%5B5%5D)%3B%20%0D%0Adocument.body.appendChild(obj%5B0%5D)%3B%20%0D%0Athis._dragobj%20%3D%20obj%5B0%5D%3B%20%0D%0Athis._resize%20%3D%20obj%5B5%5D%3B%20%0D%0Athis._cancel%20%3D%20obj%5B3%5D%3B%20%0D%0Athis._body%20%3D%20obj%5B4%5D%3B%20%0D%0A%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2Fo%2Cx1%2Cx2%20%0D%0A%2F%2F%2F%2F%E8%AE%BE%E7%BD%AEDialog%E7%9A%84%E9%95%BF%20%E5%AE%BD%20%2Cleft%20%2Ctop%20%0D%0Awith(this._dragobj.style)%7B%20%0D%0A%20%20%20%20%20height%20%3D%20this.Height%20%2B%20%22px%22%3Btop%20%3D%20this.Top%20%2B%20%22px%22%3Bwidth%20%3D%20this.Width%20%2B%22px%22%3Bleft%20%3D%20this.Left%20%2B%20%22px%22%3BzIndex%20%3D%20this.Zindex%3B%20%0D%0A%7D%20%0D%0Athis._body.style.height%20%3D%20this.Height%20-%20this.Titleheight-parseInt(CurrentStyle(this._body).paddingLeft)*2%2B'px'%3B%20%0D%0A%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%20%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6%20%0D%0AaddListener(this._dragobj%2C'mousedown'%2CBindAsEventListener(this%2C%20this.Start%2Ctrue))%3B%20%0D%0AaddListener(this._cancel%2C'mouseover'%2CBind(this%2Cthis.Changebg%2C%5Bthis._cancel%2C'0px%200px'%2C'-21px%200px'%5D))%3B%20%0D%0AaddListener(this._cancel%2C'mouseout'%2CBind(this%2Cthis.Changebg%2C%5Bthis._cancel%2C'0px%200px'%2C'-21px%200px'%5D))%3B%20%0D%0AaddListener(this._cancel%2C'mousedown'%2CBindAsEventListener(this%2Cthis.Disappear))%3B%20%0D%0AaddListener(this._body%2C'mousedown'%2CBindAsEventListener(this%2C%20this.Cancelbubble))%3B%20%0D%0AaddListener(this._resize%2C'mousedown'%2CBindAsEventListener(this%2C%20this.Start%2Cfalse))%3B%20%0D%0A%7D%2C%20%0D%0ADisappear%3Afunction(e)%7B%20%0D%0A%20%20%20%20%20this.Cancelbubble(e)%3B%20%0D%0A%20%20%20%20%20document.body.removeChild(this._dragobj)%3B%20%0D%0A%7D%2C%20%0D%0ACancelbubble%3Afunction(e)%7B%20%0D%0A%20%20%20%20%20this._dragobj.style.zIndex%20%3D%20%2B%2BDialog.Zindex%3B%20%0D%0A%20%20%20%20%20document.all%3F(e.cancelBubble%3Dtrue)%3A(e.stopPropagation())%20%0D%0A%7D%2C%20%0D%0AChangebg%3Afunction(o%2Cx1%2Cx2)%7B%20%0D%0A%20%20%20%20%20o.style.backgroundPosition%20%3D(o.style.backgroundPosition%3D%3Dx1)%3Fx2%3Ax1%3B%20%0D%0A%7D%2C%20%0D%0AStart%3Afunction(e%2Cisdrag)%7B%20%0D%0A%20%20%20%20%20if(!isdrag)%7Bthis.Cancelbubble(e)%3B%7D%20%0D%0A%20%20%20%20%20this._Css%20%3D%20isdrag%3F%7Bx%3A%22left%22%2Cy%3A%22top%22%7D%3A%7Bx%3A%22width%22%2Cy%3A%22height%22%7D%20%0D%0A%20%20%20%20%20this._dragobj.style.zIndex%20%3D%20%2B%2BDialog.Zindex%3B%20%0D%0A%20%20%20%20%20this._isdrag%20%3D%20isdrag%3B%20%0D%0A%20%20%20%20%20this._x%20%3D%20isdrag%3F(e.clientX%20-%20this._dragobj.offsetLeft%7C%7C0)%3A(this._dragobj.offsetLeft%7C%7C0)%20%3B%20%0D%0A%20%20%20%20%20this._y%20%3D%20isdrag%3F(e.clientY%20-%20this._dragobj.offsetTop%20%7C%7C0)%3A(this._dragobj.offsetTop%7C%7C0)%3B%20%0D%0A%20%20%20%20%20if(isIE)%20%0D%0A%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20addListener(this._dragobj%2C%20%22losecapture%22%2C%20this._fS)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20this._dragobj.setCapture()%3B%20%0D%0A%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20e.preventDefault()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20addListener(window%2C%20%22blur%22%2C%20this._fS)%3B%20%0D%0A%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20addListener(document%2C'mousemove'%2Cthis._fM)%20%0D%0A%20%20%20%20%20addListener(document%2C'mouseup'%2Cthis._fS)%20%0D%0A%7D%2C%20%0D%0AMove%3Afunction(e)%7B%20%0D%0A%20%20%20%20%20window.getSelection%20%3F%20window.getSelection().removeAllRanges()%20%3A%20document.selection.empty()%3B%20%0D%0A%20%20%20%20%20var%20i_x%20%3D%20e.clientX%20-%20this._x%2C%20i_y%20%3D%20e.clientY%20-%20this._y%3B%20%0D%0A%20%20%20%20%20this._dragobj.style%5Bthis._Css.x%5D%20%3D%20(this._isdrag%3FMath.max(i_x%2C0)%3AMath.max(i_x%2Cthis.Minwidth))%2B'px'%3B%20%0D%0A%20%20%20%20%20this._dragobj.style%5Bthis._Css.y%5D%20%3D%20(this._isdrag%3FMath.max(i_y%2C0)%3AMath.max(i_y%2Cthis.Minheight))%2B'px'%20%0D%0A%20%20%20%20%20if(!this._isdrag)%20%0D%0A%20%20%20%20%20this._body.style.height%20%3D%20Math.max(i_y%20-this.Titleheight%2Cthis.Minheight-this.Titleheight)-2*parseInt(CurrentStyle(this._body).paddingLeft)%2B'px'%3B%20%0D%0A%7D%2C%20%0D%0AStop%3Afunction()%7B%20%0D%0A%20%20%20%20%20removeListener(document%2C'mousemove'%2Cthis._fM)%3B%20%0D%0A%20%20%20%20%20removeListener(document%2C'mouseup'%2Cthis._fS)%3B%20%0D%0A%20%20%20%20%20if(isIE)%20%0D%0A%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20removeListener(this._dragobj%2C%20%22losecapture%22%2C%20this._fS)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20this._dragobj.releaseCapture()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20removeListener(window%2C%20%22blur%22%2C%20this._fS)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%7D%3B%20%0D%0A%20%20%20%20%20%7D%20%0D%0A%7D)%20%0D%0Anew%20Dialog(%7BWidth%3A300%2CHeight%3A300%2CLeft%3A300%2CTop%3A300%7D)%3B%20%0D%0Anew%20Dialog(%7BInfo%3A%22%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6%22%2CContent%3A%22%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6www.glzy8.com%22%7D)%3B%20%0D%0A%0D%0Afunction%20creat()%7B%20%0D%0A%20%20%20%20%20new%20Dialog(%7BInfo%3Atitle%3D%22%E6%A0%87%E9%A2%98%22%2Bi%2CLeft%3A300%2Bleft%2CTop%3A300%2Bleft%2CContent%3A'%E5%86%85%E5%AE%B9'%2Bi%2CZindex%3A(%2B%2BDialog.Zindex)%7D)%3B%20%0D%0Ai%2B%2B%3Bleft%20%2B%3D10%3B%20%0D%0A%7D%20%0D%0A%2F%2F%20--%3E%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程