JavaScript 实现简单的拖拽效果

之前一直对js中常用坐标属性不是很熟，特意花了一个下午的时间研究，并写了一个实现元素拖动的函数，在这边分享一下。（如果有不对的地方，还请批评指正~）

先介绍一下实现元素拖动需要的坐标属性。offsetLeft、offsetTop 和 clientX、clientY

offsetLeft \ offsetTop 用在dom节点中，可以返回当前元素距离某个父辈元素左边缘的距离

    ps. （1）如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。

           （2）如果父辈元素中没有定位元素，那么就返回相对于body左边缘距离。

clientX、clientY 在事件中使用，返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。 

    语法： event.clientX

之后我们来理一下实现拖动函数的思路，下面的示意图，希望可以便于大家理解。

之后我们来将拖拽的动作进行分析，转化为我们熟悉的js函数

    1、按住 div（需要拖动的元素， 之后均由div代指）， 借助mousedown这个鼠标事件，将步骤2激活

    2、按住鼠标拖动 因为js没有按住拖动这样一个鼠标事件 不过我们有mousemove记录鼠标移动的事件结合步骤1中的mousedown ，在鼠标按下时激活mousemove事件，通过clientX、clientY得到div的top、left值，鼠标松开时删去mousemove

    3、松开鼠标 将步骤2绑定的事件解除

$('body').on('mousedown','.fish', function(ev) {  //步骤1    var oEvent = ev || event;    var distanceX = oEvent.clientX - $(this).offset().left; //下面有解释    var distanceY = oEvent.clientY - $(this).offset().top;    var item = $(this);    //步骤2    document.onmousemove = function(ev) {        var oEvent = ev || event;        item.css('left', oEvent.clientX - distanceX + 'px');        item.css('top', oEvent.clientY - distanceY + 'px');    };  //步骤3    document.onmouseup = function() {        document.onmousemove = null;        document.onmouseup = null;    }})

    因为offsetLeft、offsetTop和元素left、top属性都是基于元素的左上角的，然而鼠标拖动的点击点不会刚好是元素的左上角，所以要将点击点到左上角的距离定义为distanceX、distanceY，在修改left、top的时候删去消去误差。