好久没做正经事情了,今天开始,整理一下以前写的代码。
说明懒得写了,js代码里有很详细的注释,代码很少很精简,喜欢的朋友可以看一下。
唉,外面的代码太乱了,不调整了。轻量级的应用,无须其他任何框架,推荐使用,本人原创,不要移除说明信息。
![drag me 14.jpg](http://www.rssair.com/demo/images/14.jpg)
随意拖动
![Drag me(horizontal) 2.jpg](http://www.rssair.com/demo/images/2.jpg)
水平移动
![Drag me(vertical) 0.jpg](http://www.rssair.com/demo/images/0.jpg)
垂直移动
完整源码如下:
/**/
/*********************************************************
**
** FileName: Drag.js
**
** Author: Truly
** Date: 2006.8.15
** Function: 实现指定对象的拖动等功能
** Compatibility: IE4, IE5+, FireFox, etc.
** Description: Perfect!!! powered by truly.
** Web: http://Truly.cnblogs.com
**
**********************************************************/
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//
事件注册,调用示例:_attachEvent(document, "mousemove", moveHandler);
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function
_attachEvent(obj, evt, func)
{
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(obj.addEventListener)
{
obj.addEventListener(evt,func,true);
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else if(obj.attachEvent)
{
obj.attachEvent("on"+evt,func);
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
eval("var old"+func+"="+obj+".on"+evt+";");
eval(obj+".on"+evt+"="+func+";");
}
}
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//
事件注销,调用示例:_detachEvent(document, "mousemove", moveHandler);
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function
_detachEvent(obj, evt, func)
{
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(obj.removeEventListener)
{ //DOM事件模型
obj.removeEventListener(evt,func,true);
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else if(obj.detachEvent)
{ //IE5+ 事件模型
obj.detachEvent("on"+evt,func);
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{ //IE事件模型
eval(obj+".on"+evt+"=old"+func+";");
}
}
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//
禁止默认行为,调用示例:_cancelDefault(event);
function
_cancelDefault(e)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
if(e.preventDefault) e.preventDefault(); //2级DOM
else e.returnValue=false; //IE
}
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//
阻止事件冒泡, 调用示例:_cancelBubble(event);
function
_cancelBubble(e)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
if(e.stopPropagation) e.stopPropagation(); //2 级DOM
else e.cancelBubble=true; //IE
}
function
gid(id)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
return document.getElementById(id);
}
//
激发指定对象的拖动事件,使用空的shadow,速度更快。§ 参数分别为 拖动对象, event, 方向(1水平,2垂直,null任意), 最大X坐标, 最大Y坐标
function
DragByShadow(dragObj,event, direction, maxX, maxY)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
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")
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
parentOffsetLeft += obj.parentNode.offsetLeft;
parentOffsetTop += obj.parentNode.offsetTop;
obj = obj.parentNode;
}
if(!document.getElementById('shadow'))
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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);
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_cancelBubble(event);
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//下面禁止执行默认动作
_cancelDefault(event);
function dragEnd()
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(!direction)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
// 未指定方向时,随意拖动
dragObj.style.left = objShadow.offsetLeft-parentOffsetLeft + 'px';
dragObj.style.top = objShadow.offsetTop-parentOffsetTop + 'px';
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else if( direction == 1)
{
// 水平移动
dragObj.style.left = objShadow.style.left;
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else if( direction == 2)
{
// 垂直移动
dragObj.style.top = objShadow.style.top;
}
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 删除阴影层,防止缓存
document.body.removeChild(objShadow);
// 注销事件
_detachEvent(document, 'mouseup', dragEnd);
//不要再让事件进一步传播.
_cancelBubble(event);
if(dragObj.layerid) //有蒙层的模块要改变蒙层的高度、宽度等。
ChangeLayer(dragObj);
}
}
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//
激发指定对象的拖动事件,实时拖动。§ 参数分别为 拖动对象, event, 方向(1水平,2垂直,null任意), 最大X坐标, 最大Y坐标
function
dragStart(dragObj,event, direction, maxX, maxY)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
// 先保存原来的尺寸,防止变形
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);
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_cancelBubble(event);
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//下面禁止执行默认动作
_cancelDefault(event);
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function moveHandler(e)
{
dragObj.style.display = '';
//把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整
if(!direction)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
// 未指定方向时,随意拖动
dragObj.style.left=(e.clientX-pointX)+"px";
dragObj.style.top=(e.clientY-pointY)+"px";
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else if( direction == 1)
{
// 水平移动
dragObj.style.left=(e.clientX-pointX)+"px";
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else if( direction == 2)
{
// 垂直移动
dragObj.style.top=(e.clientY-pointY)+"px";
}
//不要再让其他元素看到该事件.
_cancelBubble(event);
}
function dragEnd()
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
// 注销事件
_detachEvent(document, 'mousemove', moveHandler);
_detachEvent(document, 'mouseup', dragEnd);
//不要再让事件进一步传播.
_cancelBubble(event);
}
}