操作:
鼠标按下选中div------>鼠标移动,div盒子随着鼠标移动----------->鼠标放开,div不跟着鼠标移动
思路分析:
div盒子跟着鼠标移动的效果,实际上就是div盒子在页面中的位置随着鼠标变动,即选中div时的页面X和Y坐标,就是鼠标的位置,之后鼠标坐标系变化,记录变化量,将div盒子的left和top变动对应的值,改变div盒子的位置。
编码思路步骤
- 鼠标点击不放开,记录鼠标出事位置坐标
- 记录鼠标移动之后的坐标位置
- 计算出初始位置和最终位置的偏移量
- 将原先div的位置的left和top做相应的位置变更,赋值给div的css
- 更新鼠标的位置