实现javascript拖放应用

今天下午学习javascript时，根据学到的知识和搜索的资料，自己完成了一个基于javascript的拖放应用程序。
包含三个文件：1、drag.css；2、drag.js；3、index.html
主要是drag.js文件，现在谈一谈自己完成的过程：先找到图片在它所包含的盒子里的位置x1，然后找出鼠标相对于客户端窗口的位置x2，用x1-x2得到图片对象相对于窗口的位置x3；当鼠标点击图片拖动的时候捕获鼠标移动的位置（就是现在鼠标相对于客户端窗口的水平和垂直距离）x4，再用x4-x3就得到图片当前的移动的距离。

1. //<![CDATA[
2.         var dragObj = null ;    //拖放的对象
3.         var mouseOffset = null ;    //拖放对象的偏移位置
4.
5.         //捕获鼠标的事件
6.         document.onmousemove = mouseMove;
7.         document.onmouseup = mouseUp;
8.
9.         //设置x,y
10.         function MousePoint(x,y){
11.             this.x = x;
12.             this.y = y;
13.         }
14.         //创建鼠标位置
15.         function mousePosition(evnt){
16.             var x= parseInt(evnt.clientX);
17.             var y= parseInt(evnt.clientY);
18.             return new MousePoint(x,y);
19.         }
20.         //获取对象的页面偏移量
21.         function getMouseOffset(target,evnt){
22.             var theEvent = evnt ? evnt : window.event;
23.             var mousePos = mousePosition(theEvent);
24.
25.             var x = mousePos.x - target.offsetLeft;
26.             var y = mousePos.y - target.offsetTop;
27.             return new MousePoint(x,y);
28.         }
29.
30.         //对象拖动时捕获鼠标位置
31.         function mouseMove(evnt){
32.             var theEvent = evnt ? evnt : window.event;
33.             var mousePos = mousePosition(theEvent);
34.
35.             if(dragObj){
36.                 dragObj.style.position = 'absolute';
37.
38.                 dragObj.style.top = mousePos.y - mouseOffset.y + 'px';
39.                 dragObj.style.left = mousePos.x - mouseOffset.x + 'px';
40.
41.             }
42.         }
43.
44.         //停止拖放
45.         function mouseUp(){
46.             dragObj = null;
47.         }
48.
49.         //可以拖放的对象
50.         function makeDrag(item){
51.             item = document.getElementById(item);
52.             item.onmousedown = function(evnt){
53.                 dragObj = this;
54.                 mouseOffset = getMouseOffset(this,evnt);
55.                 return false;
56.             }
57.         }
58.         //载入对象 www.zzzyk.com
59.         window.onload = function(){
60.             makeDrag('img1');
61.         }
62.     //]]>

效果图：

摘自沙漠的蜗牛80

补充：web前端 , JavaScript ,