实现javascript拖放应用

 今天下午学习javascript时，根据学到的知识和搜索的资料，自己完成了一个基于javascript的拖放应用程序。

包含三个文件：1、drag.css；2、drag.js；3、index.html

主要是drag.js文件，现在谈一谈自己完成的过程：先找到图片在它所包含的盒子里的位置x1，然后找出鼠标相对于客户端窗口的位置x2，用x1-x2得到图片对象相对于窗口的位置x3；当鼠标点击图片拖动的时候捕获鼠标移动的位置（就是现在鼠标相对于客户端窗口的水平和垂直距离）x4，再用x4-x3就得到图片当前的移动的距离。

 

//<![CDATA[ 
        var dragObj = null ;    //拖放的对象 
        var mouseOffset = null ;    //拖放对象的偏移位置 
         
        //捕获鼠标的事件 
        document.onmousemove = mouseMove; 
        document.onmouseup = mouseUp; 
         
        //设置x,y 
        function MousePoint(x,y){ 
            this.x = x; 
            this.y = y; 
        } 
        //创建鼠标位置 
        function mousePosition(evnt){ 
            var x= parseInt(evnt.clientX); 
            var y= parseInt(evnt.clientY); 
            return new MousePoint(x,y); 
        } 
        //获取对象的页面偏移量 
        function getMouseOffset(target,evnt){ 
            var theEvent = evnt ? evnt : window.event; 
            var mousePos = mousePosition(theEvent); 
             
            var x = mousePos.x - target.offsetLeft; 
            var y = mousePos.y - target.offsetTop; 
            return new MousePoint(x,y); 
        } 
         
        //对象拖动时捕获鼠标位置 
        function mouseMove(evnt){ 
            var theEvent = evnt ? evnt : window.event; 
            var mousePos = mousePosition(theEvent); 
             
            if(dragObj){ 
                dragObj.style.position = 'absolute'; 
                 
                dragObj.style.top = mousePos.y - mouseOffset.y + 'px'; 
                dragObj.style.left = mousePos.x - mouseOffset.x + 'px'; 
                 
            } 
        } 
         
        //停止拖放 
        function mouseUp(){ 
            dragObj = null; 
        } 
         
        //可以拖放的对象 
        function makeDrag(item){ 
            item = document.getElementById(item); 
            item.onmousedown = function(evnt){ 
                dragObj = this; 
                mouseOffset = getMouseOffset(this,evnt); 
                return false; 
            } 
        } 
        //载入对象 
        window.onload = function(){ 
            makeDrag('img1'); 
        } 
    //]]> 

效果图：