JavaScript 实现简单的拖拽效果

Myth丶恋晨 2022-06-07 00:59 263阅读 0赞

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

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

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

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

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

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

语法： event.clientX

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

![Center][]

![Image 1][]

之后我们来将拖拽的动作进行分析，转化为我们熟悉的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的时候删去消去误差。

[Center]: /images/20220607/d0be8c22de974fc8886fcb296aa91d11.png
[Image 1]: