实现图片的拖拽功能(二)

上一篇博客{实现图片的拖拽功能(一)}讲述了简单的实现图片的拖拽功能，但是有一些小的问题，下面来解决一下
简单说一下出现的问题

• 当鼠标点击div块的时候，鼠标会直接窜到div块的左上角，无论鼠标点击什么地方都会出现这种情况，这种虽然不影响功能的实现，但是毫无疑问这样会使得用户的体验感极差，因此需要做一些优化
• 解决办法
  - - - 这种情况是由于鼠标的坐标位置引起的，当我们进行移动的时候鼠标位置发生了变化，因此我们需要的就是保持鼠标相对div块的坐标不发生变化，所以我们就需要想办法确定它的坐标，因此我们只需要找到div移动时候的偏移量就可以了
  - - - 存在这么两个方法 offsetLeft 返回元素的水平偏移位置， offsetTop 返回元素的垂直偏移位置。clientX/clientY 是相对窗口原点的坐标，因此我们只需要将clientX - offsetLeft 就可以算出来鼠标按下之后，新的div相对旧div的水平偏移量，同理，clientY - offstTop 可以求出竖直偏移量，然后就可以解决这个问题了！

在mousedown函数中加入下列代码

var moveL = event.clientX - box01.offsetLeft;
var moveT = event.clientY - box01.offsetTop;

这个就是求出来的偏移量，然后再在获取鼠标位置时，减去div的偏移量，这时候div就相当于未发生便宜，然后就看不到鼠标的改变了

var left = event.clientX - moveL;
var top = event.clientY - moveT;

因此只需要将上篇博客的源码进行这样的修改之后就可以解决这个问题了