拖动元素的理解

最近郁闷 被用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>