手写一个拖曳div

83 阅读1分钟

操作:

鼠标按下选中div------>鼠标移动,div盒子随着鼠标移动----------->鼠标放开,div不跟着鼠标移动

思路分析:

div盒子跟着鼠标移动的效果,实际上就是div盒子在页面中的位置随着鼠标变动,即选中div时的页面X和Y坐标,就是鼠标的位置,之后鼠标坐标系变化,记录变化量,将div盒子的left和top变动对应的值,改变div盒子的位置。

编码思路步骤

  1. 鼠标点击不放开,记录鼠标出事位置坐标
  2. 记录鼠标移动之后的坐标位置
  3. 计算出初始位置和最终位置的偏移量
  4. 将原先div的位置的left和top做相应的位置变更,赋值给div的css
  5. 更新鼠标的位置