拖动元素的理解

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

下面是页面的基本代码：

    
    


     
     
<style> 

     
     
#oDiv{ width:200px; height:200px; overflow:hidden; background:#00C; position:absolute; top:200px; left:200px; z-index:100;} 

     
     
</style> 

     
     
<div id="oDiv"></div> 
    
    

    
    


     
     
<script type="text/javascript"> 

     
     
    window.onload = function () { 

     
     
        var oDiv = document.getElementById("oDiv");//oDiv必须使用CSS定位 

     
     
        oDiv.onmousedown = drag; 

     
     
        function drag(evt) { 

     
     
            evt = evt || window.event; 

     
     
            this.onmouseup = drop; 

     
     
            this.onmousemove = moveDiv; 

     
     
            this.offset = { 

     
     
                x:evt.offsetX || evt.layerX, //layerX 和layerY是w3c标准的 offsetX 和 offsetY是IE标准的 

     
     
                y:evt.offsetY || evt.layerY 

     
     
            }; 

     
     
        } 

     
     
        function moveDiv(evt) { 

     
     
            evt = evt || window.event; 

     
     
            this.style.left = evt.clientX-this.offset.x+"px"; 

     
     
            this.style.top = evt.clientY-this.offset.y+"px"; 

     
     
        } 

     
     
        function drop(evt) { 

     
     
            this.onmouseup = null; 

     
     
            this.onmousemove = null; 

     
     
        } 

     
     
    }; 

     
     
</script>