探索神秘的js拖拽事件

1 问题描述最近学习js的过程中了解到拖拽事件,鼠标拖拽效果常见于用户自定义展示页面,比如qq空间,x宝店铺装修等,操作灵动,所见即所得;或者是一个简单moda...


1 问题描述

最近学习js的过程中了解到拖拽事件,鼠标拖拽效果常见于用户自定义展示页面,比如qq空间,x宝店铺装修等,操作灵动,所见即所得;或者是一个简单modal移动效果,方便用户查看原网页的内容。那么怎么灵活的实现鼠标的拖拽呢?

2 问题分析

在接触到这类问题时,首先是查阅相关博客,要有一个解答的基本思路,切忌盲目敲代码,实现鼠标的拖拽主要分为三个步骤:

1.  onmousedown:鼠标按下事件,获取鼠标点击时在div中的相对位置。

2.  onmousemove:鼠标移动事件,元素的位置 = 就是鼠标的位置 - 刚才的差值。

3.  onmouseup:鼠标抬起事件,给鼠标移动和鼠标放开赋值null,除非再次点击,否则不会有任何移动效果。

拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的。

3 解决方案

先设置div的样式,设置绝对定位,脱离文档流,便于拖拽。

拖拽功能(主要是触发三个事件:onmousedown\onmousemove\onmouseup) 

点击某物体时,move和up是全局区域,也就是整个文档通用,应该使用document对象,鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离。

控制拖拽物体的范围只能在浏览器视窗内,不允许出现滚动条。

4 总结 在实现基本的效果之前,有几点需要说明的:

  1、元素想要被拖动,它的postion属性一定要是relative或absolute。

  2、通过event.clientX和event.clientY获取鼠标的坐标。

  3、onmousemove是绑定在document元素上而不是拖拽元素本身,这样能解决快速拖动造成的延迟或停止移动的问题。