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 相关文章推荐
使用jquery实现简单的ajax
Jul 08 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
加速vue组件渲染之性能优化
Apr 09 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基础知识:控制结构
2006/12/13 PHP
php桌面中心(四) 数据显示
2007/03/11 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python open()文件处理使用介绍
2014/11/30 Python
python中Genarator函数用法分析
2015/04/08 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python爬虫之遍历单个域名
2019/11/20 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
房地产资料员岗位职责
2014/07/02 职场文书
对公司的意见和建议
2015/06/04 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
教师节主题班会教案
2015/08/17 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫