动态拖拉效果小例

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