前端实现鼠标拖拽功能

<>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 指的是距离它自己左上角的距离

• « 上一篇：【源码分析设计模式 6】Mybatis中的组合模式
• » 下一篇：synchronized是公平锁还是非公平锁