javascript在限定范围内移动

在网上找了一个改的，没有把限定范围的程序写成一个单独函数，实现的算法不是很好。

 

< html >
< head >
< script > ...
/**//*********************************************************
**
**　FileName: Drag.js
**　Function: 实现指定对象的拖动等功能
**　Compatibility: IE4, IE5+, FireFox, etc.
**　Description: Perfect!!! powered by truly.
**
**********************************************************/


// 事件注册，调用示例：_attachEvent(document, "mousemove", moveHandler);
function _attachEvent(obj, evt, func) ...{
　　if(obj.addEventListener) ...{
　　　　obj.addEventListener(evt,func,true);
　　} else if(obj.attachEvent) ...{
　　　　obj.attachEvent("on"+evt,func);
　　} else ...{
　　　　eval("var old"+func+"="+obj+".on"+evt+";");
　　　　eval(obj+".on"+evt+"="+func+";");
　　}
}

// 事件注销，调用示例：_detachEvent(document, "mousemove", moveHandler);
function _detachEvent(obj, evt, func) ...{
　　if(obj.removeEventListener) ...{ //DOM事件模型
　　　　obj.removeEventListener(evt,func,true);
　　} else if(obj.detachEvent) ...{ //IE5+ 事件模型
　　　　obj.detachEvent("on"+evt,func);
　　} else　...{ //IE事件模型
　　　　eval(obj+".on"+evt+"=old"+func+";");
　　}
}



// 禁止默认行为，调用示例：_cancelDefault(event);
function _cancelDefault(e)
...{
　　if(e.preventDefault) e.preventDefault(); //2级DOM
　　else e.returnValue=false; //IE
}

// 阻止事件冒泡， 调用示例：_cancelBubble(event);
function _cancelBubble(e)
...{
　　if(e.stopPropagation) e.stopPropagation(); //2 级DOM
　　else e.cancelBubble=true; //IE
}
function gid(id)
...{
　　return document.getElementById(id);
}
// 激发指定对象的拖动事件，使用空的shadow，速度更快。§ 参数分别为 拖动对象, event, 方向(1水平,2垂直,null任意), 最大X坐标, 最大Y坐标
function DragByShadow(dragObj,event, direction, maxX, maxY)
...{

　　var objShadow;
　　var parentOffsetLeft = 0, parentOffsetTop = 0;
　　var obj = dragObj;

　　// 先保存原来的尺寸，防止变形
　　dragObj.style.width = dragObj.offsetWidth;
　　dragObj.style.height = dragObj.offsetHeight;
//　　gid('dbg').innerHTML = dragObj.offsetTop;
　　// 处理父节点偏移量
　　while(obj.parentNode && obj.parentNode.tagName != "BODY")
　　...{
　　　　parentOffsetLeft += obj.parentNode.offsetLeft;
parentOffsetTop += obj.parentNode.offsetTop;
　　　　obj = obj.parentNode;
　　}

　　if(!document.getElementById('shadow'))
　　...{
　　　　objShadow=document.createElement("DIV");
　　　　objShadow.id = 'shadow';
　　　　objShadow.style.position='absolute';
　　　　objShadow.style.filter = 'alpha(opacity=30,style=0)';
　　　　objShadow.style.backgroundColor = '#ccc';
　　　　document.body.appendChild(objShadow);
　　}
　　else
　　　　objShadow= document.getElementById('shadow');


　　// 将阴影层放置在本层下面以防止遮住按钮等东西
　　objShadow.style.zIndex = dragObj.style.zIndex+1;
　　objShadow.style.left = parentOffsetLeft + dragObj.offsetLeft + 'px';
　　objShadow.style.top = parentOffsetTop + dragObj.offsetTop + 'px';

　　objShadow.style.width = dragObj.offsetWidth + 'px';
　　objShadow.style.height = dragObj.offsetHeight + 'px';


　　dragStart(objShadow,event, direction, maxX, maxY);
　　objShadow.style.display='none';
　　_attachEvent(document, 'mouseup', dragEnd);


　　_cancelBubble(event);


　　//下面禁止执行默认动作
　　_cancelDefault(event);
　　function dragEnd()
　　...{
　　　　if(!direction)
　　　　...{
　　　　　　// 未指定方向时，随意拖动
　　　　　　dragObj.style.left = objShadow.offsetLeft-parentOffsetLeft + 'px';
　　　　　　dragObj.style.top = objShadow.offsetTop-parentOffsetTop + 'px';
            //dragObj.style.left=(objShadow.offsetLeft-parentOffsetLeft<0)?'0':objShadow.offsetLeft-parentOffsetLeft + 'px';
            //dragObj.style.top=(objShadow.offsetTop-parentOffsetTop<0)?'0':objShadow.offsetTop-parentOffsetTop + 'px';
　　　　} else if( direction == 1) ...{
　　　　　　// 水平移动
　　　　　　dragObj.style.left = objShadow.style.left;
　　　　} else if( direction == 2) ...{
　　　　　　// 垂直移动
　　　　　　dragObj.style.top = objShadow.style.top;
　　　　}


　　　　// 删除阴影层，防止缓存
　　　　document.body.removeChild(objShadow);

　　　　// 注销事件
　　　　_detachEvent(document, 'mouseup', dragEnd);

　　　　//不要再让事件进一步传播.
　　　　_cancelBubble(event);
　　　　if(dragObj.layerid)　//有蒙层的模块要改变蒙层的高度、宽度等。
　　　　　　ChangeLayer(dragObj);
　　}
}

// 激发指定对象的拖动事件，实时拖动。§ 参数分别为 拖动对象, event, 方向(1水平,2垂直,null任意), 最大X坐标, 最大Y坐标
function dragStart(dragObj,event, direction, maxX, maxY)
...{
　　// 先保存原来的尺寸，防止变形
　　dragObj.style.width = dragObj.offsetWidth;
　　dragObj.style.height = dragObj.offsetHeight;

　　pointX=event.clientX-parseInt(dragObj.offsetLeft);
　　pointY=event.clientY-parseInt(dragObj.offsetTop);

　　_attachEvent(document, "mousemove", moveHandler);
　　_attachEvent(document, 'mouseup', dragEnd);

　　_cancelBubble(event);

　　//下面禁止执行默认动作
　　_cancelDefault(event);

　　function moveHandler(e)　...{
　　　　dragObj.style.display = '';
　　　　//把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整
　　　　if(!direction)
　　　　...{
　　　　　　// 未指定方向时，随意拖动
　　　　　　dragObj.style.left=(e.clientX-pointX);//+"px";
　　　　　　dragObj.style.top=(e.clientY-pointY);//+"px";
　　　　} else if( direction == 1) ...{
　　　　　　// 水平移动
　　　　　　dragObj.style.left=(e.clientX-pointX);//+"px";
　　　　} else if( direction == 2) ...{
　　　　　　// 垂直移动
　　　　　　dragObj.style.top=(e.clientY-pointY);//+"px";
　　　　}
　　　　//不要再让其他元素看到该事件.
　　　　_cancelBubble(event);

　　}
　　function dragEnd()
　　...{
/**//***/
            var obm=$('main');
            dragObj=$('drag');
            obmx=parseInt(obm.offsetLeft);
            obmw=600;//parseInt(obm.style.width);
            obmy=parseInt(obm.offsetTop);
            obmh=500;//parseInt(obm.style.height);
            
            dragObjx=parseInt(dragObj.offsetLeft);dragObjw=parseInt(dragObj.offsetWidth);
            dragObjy=parseInt(dragObj.offsetTop);dragObjh=parseInt(dragObj.offsetHeight);
            
            //alert(obm.style.left+obm.style.width);
            //alert(obm.style.width);
            if(dragObjx+dragObjw>obmx+obmw)
            ...{  
               
                dragObj.style.left=obmx+obmw-dragObjw;//-dragObj.style.width; 
                //alert((dragObjx+dragObjw)+','+(obmx+obmw)+','+(obmx+obmw-dragObjw)+dragObj.style.left);
            }
            else if(dragObjx<obmx)
            ...{
                dragObj.style.left=obmx;
            }
            
            if(dragObjy+dragObjh>obmh+obmy)
            ...{  
                dragObj.style.top=obmh+obmy-dragObjh;//-dragObj.style.height;
                //alert(dragObj.style.top+dragObj.style.height+','+obm.style.height+obm.style.top);
            }
            else if(dragObjy<obmy)
            ...{
                dragObj.style.top=obmy;
            } 
            //+obmx+obmw","+alert(dragObj.style.top+dragObj.style.height,obm.style.height+obm.style.top);
            //alert(dragObj.style.left+','+dragObj.style.top);
/**//***/
　　　　// 注销事件
　　　　_detachEvent(document, 'mousemove', moveHandler);
　　　　_detachEvent(document, 'mouseup', dragEnd);

　　　　//不要再让事件进一步传播.
　　　　_cancelBubble(event);
　　}
}
function $(id)...{return document.getElementById(id);}

</ script >
</ head >
< body >< center >
< div  id ="main"  style ="width: 600px;
                height: 500px; border-color: #AFD781; background-color: #ffffff; border-style: double;
                border-width: 1px" >
< DIV  id ="drag"  onselectstart ="return false"  onmousedown =dragStart(this,event)
ondragstart ="return false"
style ="CURSOR: move; POSITION: absolute;width:150px;height:150px;border:solid 1px red; " > drag me! </ DIV >
</ div >
</ center >
</ body >
</ html >