Truly
写精彩代码 品暇逸人生
posts - 91,comments - 425,trackbacks - 55

好久没做正经事情了,今天开始,整理一下以前写的代码。


说明懒得写了,js代码里有很详细的注释,代码很少很精简,喜欢的朋友可以看一下。


唉,外面的代码太乱了,不调整了。轻量级的应用,无须其他任何框架,推荐使用,本人原创,不要移除说明信息。













































div demo,随意拖动
随意拖动
水平移动
垂直移动
完整源码如下:
/*********************************************************
**
**  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
**
*********************************************************
*/



// 事件注册,调用示例:_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);
    }

}
posted on 2007-04-06 14:58  Truly  阅读(2236)  评论(5编辑  收藏