Что-то больно много кода для такой маленькой функции... Мне как-то тожн нечего было делать и я написал вот что:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body, html{
margin:0;
padding:0;
overflow:hidden;
width:100%;
height:100%;
}
div{
background-color:#CCC;
margin:10px;
border:#F00 1px solid;
}
#wBody{
position:absolute;
top:50px;
left:50px;
width:250px;
height:250px;
margin:0;
}
</style>
<script etype="text/javascript">
function xGetElementById(e){
if(!xStr(e)) return e;
if(document.getElementById) return document.getElementById(e);
else if(document.all) return document.all[e];
}
function xDef() {
for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])=='undefined') return false;}
return true;
}
function xStr() {
for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])!='string') return false;}
return true;
}
function xNum() {
for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])!='number') return false;}
return true;
}
function getCS(e,s1,s2){
if(xDef(e.currentStyle)) var s=parseInt(eval('e.currentStyle.'+s1));
else if(xDef(window.getComputedStyle)) var s=parseInt(window.getComputedStyle(e,'').getPropertyValue(s2));
return (isNaN(s))?0:s;
}
function getBorderWidth(e,width){
if(width)return getCS(e,'borderTopWidth','border-top-width')+getCS(e,'borderBottomWidth','border-bottom-width');
else return getCS(e,'borderLeftWidth','border-left-width')+getCS(e,'borderRightWidth','border-right-width')
}
function xTop(e,y){
if(xDef(y)) e.style.top=y+'px';
else return e.offsetTop-getCS(e,'marginTop','margin-top');
}
function xLeft(e,x){
if(xDef(x)) e.style.left=x+'px';
else return e.offsetLeft-getCS(e,'marginLeft','margin-left');
}
function xWidth(e,w){
if(w){if(w>0) e.style.width=w+'px'; else return 0}
else if(xNum(e.style.width)) return parseInt(e.style.width);
else return e.clientWidth+getBorderWidth(e,true);
}
function xHeight(e,h){
if(h){if(h>0) e.style.height=h+'px'; else return 0}
else if(xNum(e.style.height)) return parseInt(e.style.height);
else return e.clientHeight+getBorderWidth(e);
}
</script>
</head>
<body>
<div id="wBody">
Parent
<div id="wDrag">wDrag</div>
<div id="wReSizeXY">wReSizeXY</div>
<div id="wReSizeX">wReSizeX</div>
<div id="wReSizeY">wReSizeY</div>
<div id="wClose">wClose</div>
</div>
<script etype="text/javascript">
var wBody=xGetElementById('wBody');
var wDrag=xGetElementById('wDrag');
var wReSizeXY=xGetElementById('wReSizeXY');
var wReSizeX=xGetElementById('wReSizeX');
var wReSizeY=xGetElementById('wReSizeY');
var wClose=xGetElementById('wClose');
initWindow(wBody,wDrag,false,true,true);
initWindow(wBody,wReSizeXY,true,true,true);
initWindow(wBody,wReSizeX,true,true,false);
initWindow(wBody,wReSizeY,true,false,true);
wClose.onclick=function(){
document.body.removeChild(wBody);
}
function initWindow(oBody,oInitEvent,eType,useX,useY){
oInitEvent.onmousedown=function(event){
event=event||window.event;
var fncX=(eType)?xWidth:xLeft;
var fncY=(eType)?xHeight:xTop;
var x=event.clientX-fncX(oBody);
var y=event.clientY-fncY(oBody);
var minW=200;
var minH=200;
var cW=document.documentElement.clientWidth;
var cH=document.documentElement.clientHeight;
document.onmousemove=function(event){
event=event||window.event;
if(useX){
fncX(oBody,event.clientX-x);
if(eType){
if((xWidth(oBody)>minW)?false:xLeft(oBody)+minW>event.clientX)xWidth(oBody,minW);
if(xWidth(oBody)+xLeft(oBody)>cW)xWidth(oBody,cW-xLeft(oBody)-getBorderWidth(oBody,true));
}else{
if(xLeft(oBody)+xWidth(oBody)>cW)xLeft(oBody,cW-xWidth(oBody));
if(xLeft(oBody)<0)xLeft(oBody,0);
}
}
if(useY){
fncY(oBody,event.clientY-y);
if(eType){
if((xHeight(oBody)>minH)?false:xTop(oBody)+minH>event.clientY)xHeight(oBody,minH);
if(xHeight(oBody)+xTop(oBody)+getBorderWidth(oBody)>cH)xHeight(oBody,cH-xTop(oBody)-getBorderWidth(oBody));
}else{
if(xTop(oBody)+xHeight(oBody)>cH)xTop(oBody,cH-xHeight(oBody));
if(xTop(oBody)<0)xTop(oBody,0);
}
}
}
document.onmouseup=function(){
if(!eType){
oBody.style.top=xTop(oBody)*100/cH+'%';
oBody.style.left=xLeft(oBody)*100/cW+'%';
}
document.onmousemove=function(){return false;}
}
}
}
</script>
</body>
</html>
Помимо перетаскивания, умеет ресайзить X, Y и X+Y и закрывацца... По сути - окно...
Полностью кроссбраюзерно и быстро...
Для того, чтобы назначить объект для таскания используем функцию
initWindow(oBody,oInitEvent,eType,useX,useY)
Параметры:
oBody - узел, подвергающийся тасканию/ресайзу
oInitEvent - узел, который инициализирует событие
eType - тип события. Булево значение: true - ресайз, false - драг.
useX,useY - использовать координаты X и/или Y соответственно. Например, можно таскать/ресайзить только по X.
