js拖动功能库

<script language="javascript"> // 事件注册，调用示例：_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>