拖动元素的理解

最近郁闷 被用jsonp游览器跨域问题 搞死了 !一直都在郁闷 及 javascript现在在研究 但是用起来并不是那么的顺利!一直都在沉默中!恩 今天学习了下 元素在页面上的拖动 在谈这个效果之前 我们先来理解几个属性

1 clientX 和 clientY  clientX是指页面元素被触发鼠标指针是相对于页面可视区的水平坐标!

clientY 同理可知 是...............可视区的重向坐标!

2 offserX 和 offsetY offsetX是指元素被触发时 的位置相对于元素本身的水平坐标。

offsetY同理可知 ...................重向坐标!

首先先来理解下 我们要在页面上拖动某一块 到 页面上的另外一个位置 那么肯定这块元素是绝对定位的 并且 我们移动它时 是不断的改变他们的top值和left值!再者 我们拖动它时候肯定要触发事件!有 onmousedown事件!

那么我们现在是要计算的是 我们这个元素被拖动到页面上的某个位置时的 左上标的位置X和Y。

要计算元素的左上的x和y坐标 如上图所示:就是指x = clientX-offsetX + "px"; y= clientY-offsetY + "px";

下面是页面的基本代码:

 

  
  
  
  
  1. <style> 
  2. #oDiv{ width:200px; height:200px; overflow:hidden; background:#00C; position:absolute; top:200px; left:200px; z-index:100;} 
  3. </style> 
  4. <div id="oDiv"></div> 

 

  
  
  
  
  1. <script type="text/javascript"
  2.     window.onload = function () { 
  3.         var oDiv = document.getElementById("oDiv");//oDiv必须使用CSS定位 
  4.         oDiv.onmousedown = drag; 
  5.         function drag(evt) { 
  6.             evt = evt || window.event; 
  7.             this.onmouseup = drop; 
  8.             this.onmousemove = moveDiv; 
  9.             this.offset = { 
  10.                 x:evt.offsetX || evt.layerX, //layerX 和layerY是w3c标准的 offsetX 和 offsetY是IE标准的 
  11.                 y:evt.offsetY || evt.layerY 
  12.             }; 
  13.         } 
  14.         function moveDiv(evt) { 
  15.             evt = evt || window.event; 
  16.             this.style.left = evt.clientX-this.offset.x+"px"
  17.             this.style.top = evt.clientY-this.offset.y+"px"
  18.         } 
  19.         function drop(evt) { 
  20.             this.onmouseup = null
  21.             this.onmousemove = null
  22.         } 
  23.     }; 
  24. </script> 

 

你可能感兴趣的:(职场,休闲,拖动元素的理解)