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 相关文章推荐
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
Vue的props父传子的示例代码
May 20 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 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 一个比较完善的简单文件上传
2010/03/25 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
python实现Windows电脑定时关机
2018/06/20 Python
基于python中theano库的线性回归
2018/08/31 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
中专毕业生的自我鉴定
2013/12/01 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
旷课检讨书
2015/01/26 职场文书
初一英语教学反思
2016/02/15 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫