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的时候删去消去误差。
相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:马嘣嘣 返回首页