在网上找了一个改的,没有把限定范围的程序写成一个单独函数,实现的算法不是很好。
<
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 >
< 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 >