js实现拖拽效果
2017-02-28 16:13
260 查看
写在前面
鼠标拖拽效果常见于用户自定义展示页面,比如qq空间,x宝店铺装修等,操作灵动,所见即所得;或者是一个简单modal移动效果,方便用户查看原网页的内容。正好周末抽时间可以实现下,动手做做笔记,方便日后翻阅。
简单拖动
星星之火可以燎原,我们先从最简单的需求最起。主要分为三个步骤:
鼠标按下,获取鼠标点击时在div中的相对位置。
鼠标移动,元素的位置 = 就是鼠标的位置 - 刚才的差值。
鼠标放开,给鼠标移动和鼠标放开赋值null,除非再次点击,否则不会有任何移动效果。
映射成代码:
dragCircle.onmousedown = function(){ ...//鼠标按下 dragCircle.onmousemove = function(){ ...//鼠标移动 }; dragCircle.onmouseup = function(){ ...//鼠标抬起 }; };
效果如下:
See the Pen jBEdGX by junnan shi (@BenjaminShih) on CodePen.
其实这里会存在一个问题,当你大力超距离拖往窗口外部的时候,咱们的元素仿佛飞到了外太空。。没了!所以,这里要加上一个范围限制。
拖拽范围限制
实现思路:设置一个统一管理left,right,top,bottom范围的变量range
根据范围元素的位置,计算range各项值
当移动元素left和top超出range范围限制的时候,设置为range对应的阈值
源码和效果如下:
See the Pen 拖拽限定范围 by junnan shi (@BenjaminShih) on CodePen.
磁性吸入效果
在用户进行拖拽标签或者模块的时候,进行合理的摆放位置引导可以极大增强用户体验。这里的代码思路相对简单,判断需要引导的位置,位置参数存入一个变量对象,然后计算拖拽元素的和引导位置的距离,小于某个阈值可以直接定位。
源码和效果如下:
See the Pen 拖拽磁性吸入 by junnan shi (@BenjaminShih) on CodePen.
列表拖拽排序
列表拖拽排序应该是项目中最常用的拖拽使用场景了,直观便捷是其一大亮点。实现思路:
列表元素每个都绑定拖拽事件
鼠标按下的时候,创建一个空白节点,在原节点位置上占位
原节点绑定拖拽样式(absolute等)
文档绑定鼠标移动事件,根据当前拖拽到的位置计算其重新排序后的位置
讲空白节点插入到该位置
鼠标放开的时候,将被拖拽的元素插入到空白节点的位置
删除空白节点
移除事件绑定,清除相关
效果和源码如下:
See the Pen 列表拖拽排序 by junnan shi (@BenjaminShih) on CodePen.
相关文章推荐
- js拖拽效果 javascript实现将元素拖拽如某容器效果demo
- js拖拽效果实现
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
- js实现拖拽效果(构造函数)
- JS组件Bootstrap Table表格多行拖拽效果实现代码
- js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数
- JS实现网站菜单拖拽移位效果的方法
- JS实现的3D拖拽翻页效果代码
- JS实现网页Div层Clone拖拽效果
- JS组件Bootstrap Table表格多行拖拽效果实现代码
- js源代码实现拖拽效果
- 使用js实现的简单拖拽效果
- 兼容浏览器(IE,火狐,谷歌)js实现拖拽效果从<http://www.jb51.net/article/38034.htm>转载
- JS实现的3D拖拽翻页效果代码
- js最简单的拖拽效果实现代码
- js实现简单鼠标拖拽,文件拖入文件夹效果
- js实现拖拽效果
- js实现拖拽效果
- JS组件Bootstrap Table表格行拖拽效果实现代码
- js实现拖拽效果