<>1.实现拖拽

页面:
<div @mousedown="move" style="position: relative; "> 待拖动div </div>
实现方法:
move(e){ let odiv = e.currentTarget ; //获取目标元素 //算出鼠标相对元素的位置 let disX =
e.clientX - odiv.offsetLeft; let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e)=>{ //鼠标按下并移动的事件 //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置 let left
= e.clientX - disX; let top = e.clientY - disY; //改变元素位置属性值,移动当前元素
odiv.style.left = left + 'px'; odiv.style.top = top + 'px'; };
document.onmouseup = (e) => { // 鼠标松开后不再移动 document.onmousemove = null;
document.onmouseup = null; }; }
<>2.$event事件

* e.target 是你当前点击的元素
* e.currentTarget 是你绑定事件的元素
* 获得点击元素的前一个元素
e.currentTarget.previousElementSibling.innerHTML
* 获得点击元素的第一个子元素
e.currentTarget.firstElementChild
* 获得点击元素的下一个元素
e.currentTarget.nextElementSibling
* 获得点击元素中id为string的元素
e.currentTarget.getElementById(“string”)
* 获得点击元素的string属性
e.currentTarget.getAttributeNode(‘string’)
* 获得点击元素的父级元素
e.currentTarget.parentElement
* 获得点击元素的前一个元素的第一个子元素的HTML值
e.currentTarget.previousElementSibling.firstElementChild.innerHTML
<>3.clientY、pageY、screenY、layerY、offsetY的区别
clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离
layerY 指的是找到它或它父级元素中最近具有定位的左上角距离 offsetY 指的是距离它自己左上角的距离

技术
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信