// 事件注册,调用示例:_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';
} 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()
{
// 注销事件
_detachEvent(document, 'mousemove', moveHandler);
_detachEvent(document, 'mouseup', dragEnd);
//不要再让事件进一步传播.
_cancelBubble(event);
}
}
</script>
<SCRIPT>
function $(id){return document.getElementById(id);}
</script>
<DIV onselectstart="return false" onmousedown=dragStart(this,event)
ondragstart="return false"
style="LEFT: 50px; CURSOR: move; POSITION: absolute; TOP: 220px"><IMG id=i1
title="drag me" src="/Article/ArticleImage/31/3092/JavascriptDragDrop1.jpg">随意拖动 </DIV>
<DIV onselectstart="return false" onmousedown=dragStart(this,event,1)
ondragstart="return false"
style="LEFT: 50px; CURSOR: pointer; POSITION: absolute; TOP: 50px"><IMG id=i2
title="Drag me(horizontal)" src="/Article/ArticleImage/31/3092/JavascriptDragDrop2.jpg">水平移动
</DIV>
<DIV onmouseup="$('i3').src='/Article/ArticleImage/31/3092/JavascriptDragDrop3.jpg';"
onselectstart="return false"
onmousedown="$('i3').src='/Article/ArticleImage/31/3092/JavascriptDragDrop4.jpg';dragStart(this,event,2)"
ondragstart="return false"
style="LEFT: 350px; CURSOR: pointer; POSITION: absolute; TOP:50px"><IMG id=i3
title="Drag me(vertical)" src="/Article/ArticleImage/31/3092/JavascriptDragDrop3.jpg">垂直移动
</DIV>
动态拖拉效果小例
最新推荐文章于 2020-11-18 00:22:16 发布