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