JavaScript拖动效果

<% @ 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 >

转载于:https://www.cnblogs.com/EasyData/archive/2007/11/10/955337.html