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

做了一个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实现拖拽元素对齐到网格的实现方法。实质上是在初始化好元素的位置后（按照最小单位倍数初始化），每次移动固定距离（最小单位距离）即可。

感谢阅读。

转载请说明出处~~~3Q

JavaScript实现拖拽元素对齐到网格（每次移动固定距离）的更多相关文章

  1. juqery 拖拽元素

    转自  http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...

  2. Javascript自由拖拽类

    基本拖拽配置 new Dragdrop({target 拖拽元素 HTMLElemnt 必选bridge 指定鼠标按下哪个元素时开始拖拽,实现模态对话框时用到 dragable 是否可拖拽 (true ...

  3. javascript鼠标拖拽的那些事情

    <html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...

  4. 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题

    被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...

  5. H5 拖拽元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue-drag-resize 可拖拽可缩放的标签，如何管理多个拖拽元素之间的zIndex？操作上需要保持当前激活的组件是最上层，但是在总体上，又要确保其图层管理的顺序。

    麻烦总是不断出现,还好办法总比困难多, 1.公司开发一款可视化编辑html网页的多媒体编辑平台,牵扯到标签元素的拖拽,缩放,我找了找方法发现原生技术实现起来代码太多,麻烦,还好找到了一个vue组件,可 ...

  7. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  8. js 鼠标拖拽元素

    基础知识 event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event. ...

  9. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

随机推荐

  1. Android之线程池深度剖析

    1.线程池的引入   引入的好处:   1)提升性能.创建和消耗对象费时费CPU资源   2)防止内存过度消耗.控制活动线程的数量,防止并发线程过多.   使用条件:      假设在一台服务器完成一 ...

  2. Spire.DOC生成表格测试

    首先,很感谢Jack对我的信任,让我来写一个评测,在此对Jack说一声抱歉,由于本人愚钝,并且最近项目比较紧张,把评测这个事情脱了一个月之久,由于往后的日子可能更忙,所以今晚抽空只能只写了一个小程序来 ...

  3. javascript运动系列第七篇——鼠标跟随运动

    × 目录 [1]眼球转动 [2]苹果菜单[3]方向跟随 前面的话 运动除了直线运动和曲线运动两种运动形式外,还有一种运动形式是鼠标跟随运动,而这种跟随运动需要用到三角函数的相关内容或者需要进行比例运算 ...

  4. IOS数据存储之Sqlite数据库

    前言: 之前学习了数据存储的NSUserDefaults,归档和解档,沙盒文件存储,但是对于数据量比较大,需要频繁查询,删除,更新等操作的时候无论从效率上还是性能上,上述三种明显不能满足我们的日常开发 ...

  5. 掌握 Cinder 的设计思想 - 每天5分钟玩转 OpenStack（46）

    上一节介绍了 Cinder 的架构,这节讨论 Cinder 个组件如何协同工作及其设计思想. 从 volume 创建流程看 cinder-* 子服务如何协同工作 对于 Cinder 学习来说,Volu ...

  6. bootstrap 学习总结

    Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.当前最新版本是3.2.0; 使用的第一步,可以直接复制官方的模版,另存为index ...

  7. struts2学习笔记--使用Validator校验数据

    我们在进行一些操作是需要对用户的输入数据进行验证,比如网站的注册,需要对各个数据项进行数据校验,Struts2提供了一些默认的校验器,比如数字的检测,邮箱的检测,字符串长度的检测等等. 常用的Vali ...

  8. 奇葩bug笔记

    一.Filemanager-master (jsp) 1.上传的html文件需要保证带外链的<script src="..."></script>标签在&l ...

  9. AGS中通过FeatureServer插入数据失败、插入数据在WMTS请求中无法显示以及version概念的讨论

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在多个项目中,当我方接口给其他部门人员使用时出现了插入数据失 ...

  10. 使用NPOI组件完成的Excel导出导入（附源代码，测试通过）

    最近遇到一个Excel导入导出的问题,要支持winform和webform,这里我是一个认真严谨的coder,所以决定把这个记录下来!和大家一起分享一下!如果需要的同学可以下载哦! 对于NPOI这个组 ...