JavaScript 实现简单的拖拽效果-蒲公英云

JavaScript 实现简单的拖拽效果

Myth丶恋晨 2022-06-07 00:59 350阅读 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的时候删去消去误差。