js的窗口坐标及拖拽

一、事件对象的坐标属性
1、事件对象.offsetX 对象事件.offsetY
点击时，获取的是标签左上角的坐标
2、事件对象.clientX 事件对象.clientY
点击时，视窗左上角坐标
3、事件对象.pageX 事件对象.pageY
点击时，页面左上角坐标

如果没有滚动，页面左上角和视窗的左上角重合，两个数值是不同的

var oDiv = document.querySelector('div');
oDiv.onclick = function(e){
    //获取对象内容左上角坐标
    var x= e.offsetX;
    var y = e.offsetY;
    console.log(x,y);
    //获取视窗创就坐标
    var CX = e.clientX;
    var CY = e.clientY;
    console.log(CX,CY);
    获取Html文档，左上角的坐标
    var PX = e.pageX;
    var PX = e.pageY;
    console.log(PX,PY);
    console.log(e);
}

例子：

给一个宽高位100px的div做随着点击位置，中心点到达点击位置

var oDiv = document.querySelector('div')
//
var oDivHeight = oDiv.offsetHeight;
var oDivWidth = oDiv.offsetWidth;
window.onclick = function(e){
    //给定位重新赋值，让定位中top和left的值发生改变，从而达到改变div位置
    // 在原始数值的基础上,再减去定位标签,宽高的一半
    oDiv.style.left = e.clientX - oDiv.offsetWidth/2 + 'px';
    oDiv.style.top = e.clientY -oDiv.offsetHeight/2 + 'px';
}

二、利用窗口坐标实现拖拽效果示例：

// 拖拽的效果
// 当鼠标按下,并且鼠标移动时发生位移事件
//获取div标签
var oDiv = document.querySelector('div');
// 在div移动之前,先记录原始的定位数据
var oldTop = window.getComputedStyle(oDiv).top;
var oldLeft = window.getComputedStyle(oDiv).left;

// 当鼠标按下时,鼠标移动,添加事件
window.onmousedown = function(){
    //console.log('鼠标按下');
    window.onmousemove = function(e){
        //console.log('鼠标滑动');
        // 将鼠标的坐标,作为div定位的数值,定位的是中心的位置
        oDiv.style.left = e.clientX - oDiv.offsetWidth/2 + 'px' ;
        oDiv.style.top = e.clientY - oDiv.offsetHeight/2 + 'px' ;
    }
}
// 当鼠标抬起时,鼠标移动,赋值null,就没有事件执行了，如果去掉这个函数，只要鼠标点过html，且还在html页面上，div就跟着移动即使没有点击div，也会跟着移动
window.onmouseup = function(){
//鼠标只要一抬起，失去移动效果
    window.onmousemove = null;
    // 可以再给div定义,定位位置,可以返回原始位置
    // 也在函数之外,记录存储原始位置
    oDiv.style.left = oldLeft;
    oDiv.style.top = oldTop;
}

示例总结思路:
1,一定是先按下事件,后移动事件 --- 先砍头再移尸
2,鼠标抬起,给移动定义事件为null
也可以添加其他操作,例如,让标签回到原位
回到原始位置,需要在程序的起始位置,先记录原始的定位坐标
3,基本思路
(1),在定义函数之外,获取浏览器窗口的宽度,高度
不能带有滚动条
(2),获取鼠标的坐标,根据项目需求,来计算表现定位的数值
鼠标的坐标,要根据实际需求而定,目前使用的是相对可视窗口左上角的定位
项目需求不同,+ / - 的数值也不同
(3),设定极值
最小值为 0 0
最大值为可视窗口宽度/高度 - 标签X轴/Y轴最终占位
(4),将最终的数据,作为标签定位的坐标
必须拼接px单位

来源：https://www.cnblogs.com/karl-kidd/p/12630131.html

标签