今天下午学习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.         //载入对象 
  59.         window.onload = function(){ 
  60.             makeDrag('img1'); 
  61.         } 
  62.     //]]> 

效果图: