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 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
Vue3 中的数据侦测的实现
Oct 09 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 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乱码问题
2012/03/25 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
php远程下载类分享
2016/04/13 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
程序员求职信
2014/04/16 职场文书
先进集体申报材料
2014/12/25 职场文书
幼儿园教师考核评语
2014/12/31 职场文书