div { width:100px; height:100px; background:red; position:absolute; }
更新时间:2021-09-08 09:15:55
说明在代码里已经很详细了,主要说下思路吧,要想拖拽div,并且保障鼠标移动的时候相对于div的位置一直不变,将拖拽分为三部分,鼠标按下、鼠标滑动、鼠标抬起
一、鼠标在div上按下时要获取
两个值:
1、鼠标在页面中的x、y坐标(也就是pagex和pagey),
2、div距离页面左边距和上边距(也就是offsetleft和offsettop),这两个值相减,得到的就是鼠标在div上的左边距和上边距(也就是offsetx和offsety)。
二、鼠标滑动时,要一直计算鼠标在页面上的坐标并减去鼠标在按下时获取到的offsetx和offsety,将其赋值给div的left和top
三、鼠标抬起,鼠标抬起后,鼠标滑动仍在继续,所以要让鼠标抬起后鼠标滑动效果消失,设置document.onmousemove = null;即可
jquery方法思路和js原生一模一样,代码更加简化,着重注意一个细节,var _this = this; 如果不加这一个,后面函数里的this指的是document,所以必须加上