js实现拖拽

给大家一个很[color=#008000]COOL的例子吧。
有的时候我们想把网页动起来，我们希望页面上的某些元素可以移动，称之为 拖拽。[/color]
原创

HTML code

   
   

    
    
    
    <%
    
    @ Page Language
    
    =
    
    "
    
    C#
    
    "
    
     AutoEventWireup
    
    =
    
    "
    
    true
    
    "
    
     CodeBehind
    
    =
    
    "
    
    Drag.aspx.cs
    
    "
    
     Inherits
    
    =
    
    "
    
    Test.Drag
    
    "
    
     
    
    %>
    
    


    
    <!
    
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    
    >
    
    


    
    <
    
    html 
    
    xmlns
    
    ="http://www.w3.org/1999/xhtml"
    
     
    
    >
    
    

    
    <
    
    head 
    
    runat
    
    ="server"
    
    >
    
    
    
    
    <
    
    title
    
    >
    
    Untitled Page
    
    </
    
    title
    
    >
    
    
    
    
    <
    
    script 
    
    type
    
    ="text/javascript"
    
     language
    
    ="javascript"
    
    >
    
    
    
    
    //
    
    为Number增加一个属性,判断当前数据类型是否是数字
    
    

    
        Number.prototype.NaN0
    
    =
    
    function
    
    (){
    
    return
    
     isNaN(
    
    this
    
    )
    
    ?
    
    0
    
    :
    
    this
    
    ;}

    
    
    //
    
    全局变量
    
    

    
        
    
    var
    
     iMouseDown
    
    =
    
    false
    
    ;
    
    
    var
    
     dragObject
    
    =
    
    null
    
    ;

    
    
    //
    
    获得鼠标的偏移量(对象2-对象1)
    
    

    
        
    
    function
    
     getMouseOffset(target,ev)
    {
        ev
    
    =
    
    ev
    
    ||
    
    window.event;
        
    
    var
    
     docPos
    
    =
    
    getPosition(target);
        
    
    var
    
     mousePos
    
    =
    
    mouseCoords(ev);
        
    
    return
    
     {x:mousePos.x
    
    -
    
    docPos.x,y:mousePos.y
    
    -
    
    docPos.y};
    }

    
    
    //
    
    获得事件发生的实际位置----------------------对象1
    
    

    
        
    
    function
    
     getPosition(e)
    {
        
    
    var
    
     left
    
    =
    
    0
    
    ;
        
    
    var
    
     top
    
    =
    
    0
    
    ;
        
    
    //
    
    相对位置累加得到实际位置
    
    

    
            
    
    while
    
    (e.offsetParent)
        {
            left
    
    +=
    
    e.offsetLeft
    
    +
    
    (e.currentStyle
    
    ?
    
    (parseInt(e.currentStyle.borderLeftWidth)).NaN0():
    
    0
    
    );
            top
    
    +=
    
    e.offsetTop
    
    +
    
    (e.currentStyle
    
    ?
    
    (parseInt(e.currentStyle.borderTopWidth)).NaN0():
    
    0
    
    );
            e
    
    =
    
    e.offsetParent;
        }
        left
    
    +=
    
    e.offsetLeft
    
    +
    
    (e.currentStyle
    
    ?
    
    (parseInt(e.currentStyle.borderLeftWidth)).NaN0():
    
    0
    
    );
        top
    
    +=
    
    e.offsetTop
    
    +
    
    (e.currentStyle
    
    ?
    
    (parseInt(e.currentStyle.borderTopWidth)).NaN0():
    
    0
    
    );
        
    
    return
    
     {x:left,y:top};
    }
    
    
    //
    
    获得发生事件鼠标的位置----------------------对象2
    
    

    
        
    
    function
    
     mouseCoords(ev)
    {
        
    
    if
    
    (ev.pageX
    
    ||
    
    ev.pageY)
        {
            
    
    return
    
     {x:ev.pageX,y:ev.pageY};
        }
        
    
    return
    
     {x:ev.clientX
    
    +
    
    document.body.scrollLeft
    
    -
    
    document.body.clientLeft,y:ev.clientY
    
    +
    
    document.body.scrollTop
    
    -
    
    document.body.clientTop};
    }


    
    
    //
    
    定义可以拖拽的对象
    
    

    
        
    
    function
    
     makeDragable(item)
    {
        
    
    if
    
    (
    
    !
    
    item) 
    
    return
    
    ;
        
    
    //
    
    为可拖拽对象定义一个onmousedown事件的方法
    
    

    
            ev
    
    =
    
    window.event;
        item.onmousedown
    
    =
    
    function
    
    (ev)
        {
            dragObject
    
    =
    
    this
    
    ;
            mouseOffset
    
    =
    
    getMouseOffset(
    
    this
    
    ,ev);
            
    
    return
    
     
    
    false
    
    ;
        }
    }

    
    
    //
    
    定义鼠标点下所调用的方法
    
    

    
        
    
    function
    
     mouseDown(ev)
    {
        ev
    
    =
    
    ev
    
    ||
    
    window.event;
        
        
    
    var
    
     target
    
    =
    
    ev.target
    
    ||
    
    ev.srcElement;
        
    
    if
    
    (target.onmousedown
    
    ||
    
    target.getAttribute(
    
    '
    
    DragObj
    
    '
    
    ))
        {
            
    
    return
    
     
    
    false
    
    ;
        }    
    }
    
    
    //
    
    鼠标抬起后释放对象
    
    

    
        
    
    function
    
     mouseUp(ev)
    {
        dragObject 
    
    =
    
     
    
    null
    
    ;
        
    
    //
    
    onmouseup事件触发时说明鼠标已经松开，所以设置down变量值为false 
    
    

    
            iMouseDown 
    
    =
    
     
    
    false
    
    ;
    }

    
    
    //
    
    鼠标移动
    
    

    
        
    
    function
    
     mouseMove(ev)
    {
        ev
    
    =
    
    ev
    
    ||
    
    window.event;
        
    
    var
    
     target   
    
    =
    
     ev.target 
    
    ||
    
     ev.srcElement;
        
    
    var
    
     mousePos 
    
    =
    
     mouseCoords(ev);
        
    
    if
    
    (dragObject)
        {
            
    
    if
    
    (dragObject.style)
            {
                
    
    //
    
    移动对象
    
    

    
                    dragObject.style.left
    
    =
    
    mousePos.x 
    
    -
    
     mouseOffset.x;
                dragObject.style.top
    
    =
    
     mousePos.y 
    
    -
    
     mouseOffset.y;
            }
        }
        
    
    //
    
    lMouseState = iMouseDown;
    
    

    
            
    
    if
    
    (dragObject) 
    
    return
    
     
    
    false
    
    ;
    }
    document.onmousedown
    
    =
    
    mouseDown;
    document.onmousemove
    
    =
    
    mouseMove;
    document.onmouseup
    
    =
    
    mouseUp;


    
    
    function
    
     moveImg()
    {
        
    
    var
    
     img1
    
    =
    
    document.getElementById(
    
    '
    
    img1
    
    '
    
    );
        makeDragable(img1);
    }
    
    
    </
    
    script
    
    >
    
    

    
    </
    
    head
    
    >
    
    

    
    <
    
    body 
    
    onload
    
    ="moveImg()"
    
    >
    
    
    
    
    <
    
    form 
    
    id
    
    ="form1"
    
     runat
    
    ="server"
    
    >
    
    
    
    
    <
    
    div
    
    >
    
    
    
    
    <
    
    img 
    
    src
    
    ="a.jpg"
    
     alt
    
    =""
    
     id
    
    ="img1"
    
     style
    
    ="position:absolute;left:0px;top:0px;"
    
     
    
    />
    
    
    
    
    </
    
    div
    
    >
    
    
    
    
    </
    
    form
    
    >
    
    

    
    </
    
    body
    
    >
    
    

    
    </
    
    html
    
    >