拖动元素的理解

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