JavaScript实现拖拽元素对齐到网格(每次移动固定距离)


Posted in Javascript onNovember 30, 2016

这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离。让元素都可以在网格内对齐。先上效果图,然后在详细说明一下细节问题

JavaScript实现拖拽元素对齐到网格(每次移动固定距离)

做了一个gif图,可以看到,每次元素的移动都是按照最小单位距离移动的。且每次元素都是对齐到网格的。

先根据demo说明一下思路和细节,后面会给出demo代码。

1. 确定元素的每次移动的最小单位(demo中为10px和10px),也就是每次水平或垂直的位移量都是10px。铺上一层网格背景是为了帮助我们更好的看到效果(demo中的每个网格也是10px * 10px)。

2. 为了可以更加明显的看到效果,初始化了元素的宽高(均为10px的倍数)和默认位置(同样为10px的倍数)。举例说明:元素宽高 50px * 50px,元素的初始位置为0xp * 0px。这样做的好处是一开始加载时就可以保证元素覆盖整数个的小网格(也就是 5 * 5 个小网格),不会出现覆盖不完整的网格。这一条其实为了让用户或者有强迫症的人不用这么纠结,实际上只是一个美化规置位置的操作。懂的朋友可以不用这么刻意,明白就好。

3. 最重要就是要如何确定什么时候移动固定的距离。这个demo效果要明白一件事:鼠标移动和元素移动是对应的,但不是实时对等的(当然,如果不考虑最小单位,只是纯拖拽元素,然后将元素的位置设置为鼠标的位置,这时可以理解为鼠标移动和元素移动是实时对等的)。回到demo说明,鼠标在网页上移动时,是一个像素一个像素移动的(可以通过console.log(e.pageX) 观察鼠标移动的位置 )。而元素是每10px移动一次。这一点就是我们要理解的关键,也是整个demo的关键。

了解了上面的思路,结合代码和注释,再说明一下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin:0px;
padding:0px;
}
div{
margin:0px;
padding:0px;
}
</style>
<script src="js/jquery-1.11.2.js"></script>
</head>
<body>
<div style="height: 600px;background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiAgICA8ZGVmcz4gICAgICAgIDxwYXR0ZXJuIGlkPSJncmlkIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0gMTAgMCBMIDAgMCAwIDEwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGRkZGQiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMSIgLz4gICAgICAgIDwvcGF0dGVybj4gICAgPC9kZWZzPiAgICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIiAvPjwvc3ZnPg==)">
<div id="bk" style="width:50px;height:50px;background: red;position: absolute"></div>
</div>
</body>
<script>
$(function(){
var orgX,orgY,eleX,eleY,hasMove=false;
$("#bk").on("mousedown",function(e){
orgX= e.pageX; //记录鼠标的水平位置
orgY= e.pageY; //记录鼠标的垂直位置
eleX=$(this).offset().left; //记录元素的水平位置
eleY=$(this).offset().top; //记录元素的垂直位置
hasMove=true; //鼠标按下时标明当前元素可以拖拽标识
});
$(document).on("mousemove",function(e){
if(hasMove){ //当元素可以拖拽时执行操作
//新位置计算方法为元素的上次位置加上新的位移量
var left=eleX+Math.round( ( e.pageX - orgX ) / 10 ) * 10;
var top= eleY+Math.round( ( e.pageY - orgY) / 10 ) * 10;
//更新位置信息
$("#bk").css({
top:top,
left:left
});
}
}).on("mouseup",function(e){
hasMove=false; //鼠标松开时设置元素不可拖拽
});
})
</script>
</html>

面的代码给出的较详细的注释,其中,最为关键的代码就是

Math.round( ( e.pageX - orgX ) / 10 ) * 10;

该代码是计算元素新的位移量,用鼠标的最新位置减去在元素按下时的鼠标位置,除以最小单位10,进行四舍五入后获得整数值,然后在乘以最小单位10。就可以获得元素应该需要移动的单位距离了。这条如果不明白可以运行代码自己思考体会一下。(当然使用Mach的ceil和floor方法也可以)。

okay,以上就是javascript实现拖拽元素对齐到网格的实现方法。实质上是在初始化好元素的位置后(按照最小单位倍数初始化),每次移动固定距离(最小单位距离)即可。

Javascript 相关文章推荐
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
JavaScript数组操作详解
Feb 04 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
微信小程序实现图片上传功能
May 28 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
jquery.Callbacks的实现详解
Nov 30 #Javascript
javascript中活灵活现的Array对象详解
Nov 30 #Javascript
如何处理JSON中的特殊字符
Nov 30 #Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 #Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 #Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 #Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 #Javascript
You might like
php批量删除cookie的简单实现方法
2015/01/26 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP打印输出函数汇总
2016/08/28 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
js+css在交互上的应用
2010/07/18 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
Python isinstance判断对象类型
2008/09/06 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
Notino法国:购买香水和化妆品
2019/04/15 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
Shell如何接收变量输入
2012/09/24 面试题
2014年计生标语
2014/06/23 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
欠条样本
2015/07/03 职场文书
计算机教师工作总结
2015/08/13 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server