js功能类库放送（一） 拖动功能库

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


说明懒得写了，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);
    }
}

转载于:https://www.cnblogs.com/Truly/archive/2007/04/06/702752.html